Vue.js Vue嵌套路由不包括动态参数

我有两条路线，比如说帖子和页面，在每个用户路线中，比如

/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},
      ]
    }
  ]
})

User.vue

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

然而，预期结果应该是（当我在

foo

内时）

---

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

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

帖子

我读取了vue路由器源代码，然后看到它们从堆栈中弹出最后一项。

当您将尾部斜杠添加到父路径中时，它会像您预期的那样工作

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

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

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