一、路由是什么
路由传参是指在前端路由中通过URL传递参数的方式,用于在不同页面之间传递数据和状态信息。
二、路由跳转的2种方式
①声明式导航:通过router-link实现(必须要有to属性),实现路由跳转
②编程式导航:利用的是组件实例的$router.push或$router.replace方法,实现路由的跳转,同时也可在里面书写一些其他业务,比如路由传参
三、路由传参的3种写法
params传参:属于路径当中的一部分,在配置路由的时候需要占位
query传参:不属于路径当中的一部分,比如/home?k=v&k=v,不需要占位
props传参:路由组件传参(有三种方式)
3.1、params和query传参的实现步骤
需求:收集输入框数据,在点击搜索按钮时,将收集到的数据在路由跳转时传给Search页面
![](https://i-blog.csdnimg.cn/blog_migrate/109f7fd240c9c77a181fa636dd96139b.png)
第一步:收集表单数据
<input type="text" v-model="keyword" />
export default {
data() {
return {
keyword:''
}
},
methods: {
goSearch(){
this.$router.push('/search')
}
},
}
第二步:配置路由
子组件路由占位,配置好参数-->:keyword(参数需要用冒号:表示)
{ path: '/search/:keyword', component: Search }
第三步:路由跳转(3种形式)
⭐第一种:字符串形式
父组件编程式传参
goSearch(){
this.$router.push('/search/'+this.keyword+'?k='+this.keyword.toUpperCase())
}
⭐第二种:模板字符串
父组件编程式传参
goSearch(){
this.$router.push(`/search/${this.keyword}?k=${this.keyword.toUpperCase()}`)
}
⭐第三种:对象形式(比较常用)
需要先给search路由起个名字 name:"search",不能用path路由形式
{ path: '/search/:keyword', component: Search,name:'search' }
父组件编程式传参
goSearch(){
this.$router.push({
name:'search',
params:{keyword:this.keyword},
query:{k:this.keyword.toUpperCase()}
})}
3.2、props传参实现步骤(三种形式)
⭐第一种:布尔模式【只能传递params参数】
可以把params作为路由组件的属性
{ path: '/search', component: Search, props: true }
并在search组件中传入props数据
props:['keyword']
⭐第二种:对象形式
{ path: '/search', component: Search, props: {a:1,b:2} }
并在search组件中传入props数据
props:['a','b']
⭐第三种:函数形式
{ path: '/search', component: Search, props: route => ({keyword:route.params.keyword, k: route.query.k })}
并在search组件中传入props数据
props:['keyword','k']
四、路由传参常见问题分析
问题1:路由传递参数(对象写法)path是否可以结合params参数一起使用吗?👇==不能
path结合params参数错误写法
this.$router.push({
path:'/search',
params:{keyword:this.keyword},
query:{k:this.keyword.toUpperCase()}
})
以上写法是错误的,会报以下错误,且路径中也不会出现params参数;
![](https://i-blog.csdnimg.cn/blog_migrate/7d8e29fa6604e83e65c7b751beb7450f.png)
所以path这种写法不能与params参数一起使用,可以和name一起使用
问题2:如何指定params参数可传可不传?
首先params路由是需要占位,前面用了keyword进行了占位,此时路由是要求params传参的,如果没有传,URL地址便会有问题,地址中没有跳转到search这一路径也就不会出现search
已传参和未传参的2种URL对比:
已传参--->http://.../#/search/fff?k=FFF
未传参--->http://.../#/?k=FFF
解决2:params参数可以传递、或者不传递,但是如果传递是空串,如何解决?
在配置路由的时候,在占位的后面加上一个问号?,表示params可传或者不可传递
{ path: '/search/:keyword?', component: Search,name:'search' }
此时路径是正确的:http://.../#/search?k=FFF
问题3:params参数可以传递也可以不传递,但是如果传递是空串,如何解决?
this.$router.push({
name: 'search',
params:{keyword:''},
query: { k: this.keyword.toUpperCase() }
})
如果传递是空串,URL地址会有问题,地址中没有跳转到search这一路径👇
http://.../#/?k=FFF
解决3:使用undefined解决,params参数可传或不传
this.$router.push({
name: 'search',
params:{keyword:''||undefined},
query: { k: this.keyword.toUpperCase() }
})
此时路径正常,包含search--->http://.../#/search?k=FFF
最后:👏👏😊😊😊👍👍