如何制作Vue路线

Question

我正在尝试通过教程设置路线。我有此代码，但所有数据均未导入到所选页面（/ home）。知道如何解决吗？这是我的代码：

App.js

import VueRouter from 'vue-router';
import router from "./router";
import App from "./components/App";
import Test from "./components/test";
window.Vue = require('vue');
Vue.use(VueRouter);
const app = new Vue({
    el: '#app',
    render : h => h(App),
    router
});
@endsection

pastebin： https://pastebin.com/7yMREHxR

https://codesandbox.io/s/hungry-browser-hsi6d

Answer 1

更改

import Vue from "vue";
import VueRouter from "vue-router";
import Test from "./components/Test";

Vue.use(VueRouter);

export default new VueRouter({
  routes: [
    {
      path: "/home",
      component: Test
    }
  ]
});

到

import Vue from "vue";
import VueRouter from "vue-router";
import Test from "./components/Test";

Vue.use(VueRouter);

export default new VueRouter({
  routes: [
    {
      path: "/",
      component: Test
    }
  ]
});

这里的关键是path属性。您将其设置为“ / home”。因此，您的应用程序可以工作，但是只有当您通过将其更改为“ /”导航到“ localhost：xxxx / home /”时，它才成为您的根视图。签出这个沙盒以解决问题：

希望这会有所帮助！