Vue路由参数传递详解

Vue路由参数传递详解

---

这里做一个demo演示如果请求带有参数该怎么传递

方式一：取值方式

1.修改路由配置，主要是router下的index.js 中的path属性，增加了:id ，用来接受参数id

{
   
      path:'/main',
      component:Main,
      children:[
        {
   
          path:'/user/profile/:id',
          name:'UserProfile',
          component:UserProfile,
          props:true
        },
        {
   path:'/user/list',component:UserList},
      ]
}

2.传递参数
此时我们在Main.vue中的route-link位置处 to 改成了:to,:to 相当于v-bind:to

这样写为了将这一属性当成对象使用，注意router-link中的name属性名称 一定要和路由中的name属性名称匹配，因为这样vue才能找到对应的路径