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

【问题标题】：Vue nested routing does not including dynamic parametersVue嵌套路由不包含动态参数
【发布时间】：2019-10-22 00:50:11
【问题描述】：

我有两条路线，比如帖子和页面，在每个用户路线内，比如 /user/foo/pages, user/foo/posts, /user/bar/pages, user/bar/posts 其中foo 和bar 是动态内容。但是vue中的嵌套路由不包括foo和bar

路由器.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},
      ]
    }
  ]
})

用户.vue

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

当我已经在foo 或bar 中时，vue 产生的结果是

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

【问题讨论】：

标签： vue.js vue-router

【解决方案1】：

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

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

当您将斜杠添加到父路径中时，它会按预期工作

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

【讨论】：

【解决方案2】：

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

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

【讨论】：