0

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

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 下面的子路由吗???而中间的那一层是什么作用呢?谢谢

2018-12-10 提问
6 个回答
0

已采纳

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

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

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

0

你把 :id删除了 再试试呢

0

举个例子/user/123456/profile
代表的就是/用户/用户id/子路由
:id的作用就是动态的指向某个用户的id,你可以当作路由里的一个变量

0

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

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

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

撰写答案

推广链接