vue中的动态路由传参

vue中的动态路由传参

对于常见的路由动态传参 有两种方式一种为 query的导航传参方式 通过 path和query的结合 ，参数一般可以在地址栏中看到 在组件中通过 $route.query进行参数的获取，另一种方式就是 组件name和params的方式进行传参，参数在地址栏中以/参数值/参数值的形式出现的，在组件中通过$route.params的方式进行数据的获取的 这两种方式都可以实现动态路由的参数传递，但是存在较高的耦合性 比如我们通过params方式传递参数只能在特定的页面通过 $route.params的方式获取 但是我们通过props的方式则可以解耦，提高组件的复用性

第一种方式

props:ture (这种模式在进行参数传递的时候切记得是params这种模式 query这种模式不生效)

//在router/index.js的传参组件页面添加

new Router({
 routes:[
 {path:‘/index’,
 name:"form"
  component:()=>import('@view/form/index');
  props:ture//开启组件参数传递
 }
]
})

在a页面

this.$router,push({
name:"form',
params:{
 user:{
 name:"张三",
 age:23
}
})
//还可以是采用动态路由的方式
{path:"xxx/xxx/:id"}
页面地址
xxx/xxx/12
这在使用的页面通过
props:{
id:Number,
default:0
}
进行使用即可

在form页面

props：{
user：{
type:Object,
default:{}
}

}
//然后在form页面可以开心的使用user这个对象了

第二种方式(这种方式传递的是query的数据格式)

通过函数的方式

new Router({
 routes:[
 {path:‘/index’,
 name:"form"
  component:()=>import('@view/form/index');
  props:(route)=>{
   return {
   user:route.query.user //将传递过来的数据通过返回值的形式进行返回
}//开启组件参数传递
 }
]
})

第三种方式

传递静态的数据

new Router({
 routes:[
 {path:‘/index’,
 name:"form"
  component:()=>import('@view/form/index');
  props:{
   user:{
   name:"张三",
   age:"18"
}
}
 }
]
})

如需补充请评论区留言