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了