Vue.js nested routing

Question

My Current Route is

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'),

Now Everything is working fine. but when I visit /blog/:slug route and from that component when I click back to /help from button Route pattern is /blog/help not the /help.

This is why it is important to nest your routes – samayo Dec 15 '17 at 07:22 — samayo, Dec 15 '17 at 07:22

score -1 · Accepted Answer · answered Dec 15 '17 at 08:07

See my jsfiddle Vuejs route , I mean this help you.

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>

it would be great if you add some explanation as well what was the issue and why its not working with his code , so in future it can be helpful to him as well for better understanding of concept. — Hardik Satasiya, Dec 15 '17 at 08:13
I advise you to read documentation that it became clear how it is better to do. You may begin to read "Essentials" and "Advanced > lazy-loading" for resolving your issue. Docs: https://router.vuejs.org/en/ . — Sergey, Dec 15 '17 at 08:27
its not about me or you we should think about question and how we can help the user. — Hardik Satasiya, Dec 15 '17 at 08:58
@HardikSatasiya oh, I thought you are author of the question, sorry:) I don’t know why the user did it like above. I tried to show other way for resolve this issue. When we read documentation we understand the better way, so I gave a link. — Sergey, Dec 15 '17 at 09:27

Vue.js nested routing

1 Answers1