Vue.js 嵌套路由

Question

我当前的路线是

function route(path, view) {
return {
    path: path,
    meta: meta[path],
    component: resolve => import(`pages/${view}View.vue`).then(resolve)
   }
}

route('/', 'Home'),
route('/help', 'Help),
route('/blog', 'BlogList'),
route('/blog/:slug', 'BlogDetails'),

现在一切正常。但是当我访问 /blog/:slug 路由时，当我从按钮单击返回 /help 时从该组件路由模式是 /blog/help 而不是 /help.

Answer 1

看我的jsfiddle Vuejs route，我的意思是这对你有帮助。

const Home = {
        template: '<h1>Home</h1>'
    };

    const Help = {
        template: '<h1>Help</h1>'
    };

    const Profile = {
        template: '<h1>Profile</h1>'
    };

    const User = {
        template: '<h1>User</h1>'
    };

    routes = [
        {path: '/', component: Home},
        {path: '/help', component: Help},
        {path: '/user', component: User},
        {path: '/user/:id', component: {
            render(h) {
                return h(
                    'h1',
                    { style: {color: 'skyblue'} },
                    `User id: ${this.$route.params.id}`
                );
            }
        }}
    ];

    const router = new VueRouter({
        routes
    });

    new Vue({
        router
    }).$mount('#app');

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
   <div id="app">
        <router-link :to='{path: "/"}'>/</router-link> <br>
        <router-link :to='{path: "/help"}'>/help</router-link> <br>
        <router-link :to='{path: "/user"}'>/user</router-link> <br>
        <router-link :to='{path: "/user/userid"}'>/user/userID</router-link>
        {{$route.path}}
        <router-view></router-view>
        <br>
        <button @click='$router.go(-1)'>go back</button>
        <button @click='$router.go(1)'>go forward</button>
    </div>

Vue.js 嵌套路由

Vue.js nested routing

javascript

vue.js

vue-router

nested-routes