vue中实现路由传参

vue中路由传参

1.动态路由

//在路由的配置中
{
   path:'/user:id',
   name:'User',
   component:()=>{return import('文件路径') }
}

//跳转页面中
 this.$router.push('/user/'+id)
//获取传递数据的页面
this.$route.params.id

2.通过query属性传递

{
   path:'/user',
   name:'User',
   component:()=>{return import('路径名')
}
//跳转页面时传递数据路径
this.$router.push({
   path:'/user',
   query:{ 
      name:'lili',
      age:12
   }
})
//接收传递的参数
this.$route.query

3.使用params属性传递参数

{
   path:'/user',
   name:'User',
   component:()=>{return import('')
}
//传递参数
this.$router.push({
  name:'User',
  params:{
      name:'lili',
      age:21
  }
})

//接收传递的数据
this.$route.params

在上述三种路由传参的方式中：
1.动态传参和query属性传参，页面刷新参数不会丢失，params会丢失
2.动态路由只能传递一个参数（常用于只传递一个参数时）
3.params属性传递参数注意是对应的name，而不是path了