如何使 vue-routes 工作

Question

I'm trying to setup routes with tutorial. I have this code but any data not imports to the selected page(/home). Any idea how to fix it? This is my code:

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

Change

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
    }
  ]
});

to

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
    }
  ]
});

The key take away here is the path property. You set it to "/home". So your app worked but only when you navigated to "localhost:xxxx/home/" by changing it to "/" it becomes your root view. Check out this sand box to play with the solution:

Hope this helps!