Vue nested routing does not including dynamic parameters

Question

I have two routes, say posts & pages, inside each user route, like /user/foo/pages, user/foo/posts, /user/bar/pages, user/bar/posts where foo and bar are the dynamic content. However nested routing in vue does not including those foo and bar

router.js

export default new Router({
  routes: [
    {
      path: '/user/:id',
      name: 'user',
      component: User,
      children: [
        {path: 'posts', name: 'posts', component: Posts},
        {path: 'pages', name: 'pages', component: Pages},
      ]
    }
  ]
})

User.vue

<router-link to="posts">Posts</router-link>
<router-link to="pages">Pages</router-link>

The result vue is producing when i am already inside foo or bar, is

<a href="#/user/posts">Posts</a>
<a href="#/user/posts">Pages</a>

However the expected result should be (when i am inside foo)

<a href="#/user/foo/posts">Posts</a>
<a href="#/user/foo/pages">Pages</a>

Answer 1

Try to use object with name and params in your router-link, like this

<router-link :to="{name: 'posts', params: {id: $route.params.id}}">Posts</router-link>

Answer 2

i read vue-router souce code then see that they pop last item out of stack. enter image description here

https://github.com/vuejs/vue-router/blob/11e779ac94eb226e4f52677003ff8d80e5648885/dist/vue-router.common.js#L447

it works as you expected when you add trailing slash into parent path

path: '/user/:id' -> path: '/user/:id/'