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>

its2easy · Accepted Answer · 2019-06-06 14:22:44Z

2

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>

answered Jun 6, 2019 at 14:22

its2easy

213 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

VuTay · Accepted Answer · 2020-05-09 05:28:01Z

1

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/'

edited May 9, 2020 at 5:28

answered May 9, 2020 at 4:43

VuTay

512 bronze badges

Collectives™ on Stack Overflow

Vue nested routing does not including dynamic parameters

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related