Question

我在每条用户路线中都有两条路线，例如帖子和页面，例如 /user/foo/pages，user/foo/posts，/user/bar/pages，user/bar/posts 其中foo和bar是动态内容。但是，vue中的嵌套路由不包括那些foo和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>

当我已经进入foo或bar时，产生的结果是

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

但是预期的结果应该是（当我在foo内时）

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

Answer 1

尝试在路由器链接中使用带有名称和参数的对象

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

Answer 2

我阅读了vue-router源代码，然后看到它们将最后一个项目弹出堆栈。 enter image description here

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

当您在父路径中添加斜杠时，它可以按预期工作

路径：'/ user /：id'->路径：'/ user /：id /'

Vue嵌套路由不包含动态参数

2 个答案: