Vue路由传参的几种方式

一.字符串写法

1.query参数

this.$router.push("/login/?k=1")
// 跳转后的页面通过$route.query.k接收

2.params参数

this.$router.push("/login/"+this.keyword)
// 需在路由中占位
path:'/search/:keyword'
// 通过$route.params.keyword接收

二.对象写法

1.query参数

this.$router.push({name:"login",query:{keyword:this.keyword}})
// 注意query传参对象写法必须给路由组件命名（添加name属性）

2.params参数

this.$router.push({name:"login",params:{keyword:this.keyword}})
// 注意params传参对象写法必须给路由组件命名（添加name属性）

三.指定params参数可传可不传

1.在占位后面加个问号，就不会出现路径有问题

path:'/search/:keyword？'

2.如果传递的是空字符串，可以用undefined解决

this.$router.push({name:"login",params:{keyword:this.keyword||undefined}})

四.路由组件传递props数据

1.布尔值写法：在路由配置项里写props:true(只能传递params参数)

{
    path:'/search/:keyword？',
    props:true
}
// 接收
props：['keyword']
// 使用
{{keyword}}

2.对象写法：能携带一些额外参数

{
    path:'/search/:keyword？',
    props:{a:1,b:2}
}
// 接收
props：['keyword','a','b']
// 使用
{{a}}

3.函数写法：params，query参数都能传递

{
    path:'/search/:keyword？',
    props($route)=>({keyword:$route.params.keyword})
}
// 接收
props：['keyword']
// 使用
{{keyword}}