百思不得解：vue-router嵌套路由的问题

Question

在官网中 嵌套路由这一块，原文是这样写的

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // 当 /user/:id/profile 匹配成功，
          // UserProfile 会被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
          // 当 /user/:id/posts 匹配成功
          // UserPosts 会被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

我想问 为什么是匹配 /user/:id/profile而不是/user/profile，因为这样/user/profile看来不是更像是 user 下面的子路由吗？？？而中间的那一层是什么作用呢？谢谢

Answer 1

/user/:id 的路由，实际的url地址是：xxx.com/#/user/1
表示路由处理对象User，会接收一个参数，id=1

User的vue实例中，应该有这样的参数：
props: ['id']

也可以用下面的语句取id的值，但不推荐，因为这样写的话，组件就必须依赖vue-route
this.$route.params.id

Answer 2

你把 :id删除了 再试试呢

Answer 3

他是要符合restful风格，:id相当于url参数一样可以，例如 /user/1/profile 就类似 /user/profile?id=1

Answer 4

• :id动态路由的意思，你不需要可以作为传值用，你不需要就不要写他了直接用就可以了

Answer 5

这应该是动态路由和嵌套路由一起进行了使用，当然在进行动态匹配的时候，根据业务也可以根据:name,:sex等进行匹配，具体请看https://router.vuejs.org/zh/g...，可以解答:id的作用，复用则显得更加高效