路由传参相关面试题
1、路由传递参数（对象写法）path是否可以结合params参数一起使用？
需要知道
param参数：属于路径当中的一部分，需要注意，在配置路由的时候，需要占位
query参数：不属于路径当中的一部分，类似于ajax中的queryString /home?k=v的形式，不要占位
所以在配置路由的时候主要给params进行占位
{
path:"/search/:keyWord",
component:()=>import ("@/pages/Search/Search"),
meta:{show:false},
name:'search'
},
//1、路由传递参数（对象写法）path是否可以结合params参数一起使用？
this.$router.push({path:'/search',params:{keyWord:this.keyWord},query:{k:this.keyWord}})
输入 123点击按钮的时候，进行了路由的跳转
可以看到路由跳转并携带了query参数
我们在这里也可以看到params是没有值的
所以路由传参的时候，对象的写法可以是name，path的形式，注意：path的这种写法不可以和params参数一起使用
如果想要传递params需要这种写法，这种写法，需要在配置路由的时候有相对应的nama属性
this.$router.push({name:"search",params:{keyWord:this.keyWord},query:{k:this.keyWord}})
输入123之后进行跳转我们可以看到路由信息携带了参数
并且，在这里我们也可以查看到参数信息
2、如何指定params参数可传可不传
{
path:"/search/:keyWord",
component:()=>import ("@/pages/Search/Search"),
meta:{show:false},
name:'search'
},
此时在配置路由的时候已经给params进行了占位，如果此时我们就不传params参数会怎么样？
this.$router.push({name:'search',query:{k:this.keyWord}})
同样的输入12之后进行搜索跳转
此时我们可以看到在进行了跳转之后，路径出了问题
按照对路由跳转的理解
此时我们的路径应该是这样的
http://localhost:8080/search?k=123
但是此时的路径没有seach
如果路由要求传递params参数。但是我们就不传递参数，就会发现此时的url就会有问题，那么如何指定params参数可传可不传呢？
我们在配置的路由的时候在占位的后面添加一个“?”，表示params参数可传可不传
{
path:"/search/:keyWord?",
component:()=>import ("@/pages/Search/Search"),
meta:{show:false},
name:'search'
},
此时我们在进行跳转的时候正常了
3、params参数可以传递也可以不传递，但是如果传递是空串，如何解决
//3、params参数可以传递也可以不传递，但是如果传递是空串，如何解决 this.$router.push({name:"search",params:{keyWord:''},query:{k:this.keyWord}})
此时输入123之后点击搜索，我们可以看到路由地址为：
如果我们此时随便传入一个params参数
this.$router.push({name:"search",params:{keyWord:'123'},query:{k:this.keyWord}})
此时我们就会看到此时的路由已经正常显示
这种问题我们可以使用undefined来解决params参数可以传递也可以不传递（空的字符串）
this.$router.push({name:"search",params:{keyWord:''||undefined},query:{k:this.keyWord}})
此时在点击的时候，路由就正常显示了
4、路由组件能不能传递props数据
路由组件是可以的
路由传参有三种形式
第一种：
配置路由的时候
{
path:"/search/:keyWord?",
component:()=>import ("@/pages/Search/Search"),
meta:{show:false},
name:'search',
//第一种种
//这种做的好处，可以params作为路由组件身上的一个属性
props:true
},
this.$router.push({name:"search",params:{keyWord:this.keyWord},query:{k:this.keyWord}})
此时我们在输入123就可以看到多了一个$attrs的属性
此时我们在Search组件中就可以接收显示
<template>
<div>
{{keyWord}}
</div>
</template>
<script>
export default {
props:[keyWord]
}
</script>
但是这种方法只能传递params参数
第二种写法
{
path:"/search/:keyWord?",
component:()=>import ("@/pages/Search/Search"),
meta:{show:false},
name:'search',
//第一种种
//这种做的好处，可以params作为路由组件身上的一个属性
// props:true
//第二种
props:{a:1,b:2}
},
<template>
<div>
{{keyWord}}
{{a}}
{{b}}
</div>
</template>
<script>
export default {
props:['keyWord','a','b']
}
</script>
此时我们就可以接收到这两种参数
这种对象写法，就是额外的给路由组件传递一些props
第三种：函数式写法，可以将params参数、query参数，通过props传递给路由组件
{
path:"/search/:keyWord?",
component:()=>import ("@/pages/Search/Search"),
meta:{show:false},
name:'search',
//第一种种
//这种做的好处，可以params作为路由组件身上的一个属性
// props:true
//第二种
// props:{a:1,b:2}
//第三种，函数写法
props:(route)=>{
return {keyWord:route.params.keyWord,k:route.query.keyWord}
}
},
此时在这里仍然可以看到传入的参数，并且此时的路由地址也是正常的
