路由传参面试题

1：路由传递参数（对象写法）path是否可以结合params一起使用？

不能,运行报错 

this.$router.push({path:'/search',params:{keyword:this.keyword},query:{k:this.keyword.toUpperCase()}})

答：路由跳转传参的时候，对象写法可以使name和path的形式，但需要注意的是path这种写法不能与params参数一起使用

2：如何指定params参数可传可不传？

this.$router.push({name:'search',query:{k:this.keyword.toUpperCase()}})

比如：配置路由的时候，占位了（params参数），但是路由跳转的时候就不传递，

路径会出现错误  http://localhost:8080/#/?k=WWWQ

正确的是：  http://localhost:8080/#/search/wwwq?k=WWWQ

解决：如何指定params参数可以传递，或者不传递，配置路由时，在占位符后面加一个？

3：params参数可以传递也可以不传递，但是如果传递是空串，如何解决？

this.$router.push({name:'search',params:{keyword:''},query:{k:this.keyword.toUpperCase()}})

路径会出现错误  ;

解决：后面加 undefined

this.$router.push({name:'search',params:{keyword:''||undefined},query:{k:this.keyword.toUpperCase()}})

4：路由组件能不能传递props数据？

可以的，三种写法：

1:布尔值写法：只能传递params参数       

props:true               在组件里面接收   ：  props:["keyword"]

2:对象写法

props:{a:1,b:2}              在组件里面接收   ：  props:["keyword","a","b"]

3:常用的是函数写法：可以params参数，query参数，通过props传递给路由组件

props:($route)=>{
    return {keyword:$route.params.keyword,k:$route.query.k};
}

 也可以简写为：

props:($route)=>({keyword:$route.params.keyword,k:$route.query.k});

基本写法：

<h1>params参数----{{$route.params.keyword}}===={{ keyword }}</h1>
<h1>query参数 --- {{$route.query.k}}==={{ k }}</h1>

在组件里面接收   ：  props:["keyword","k"]