Vue路由传参相关面试题

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

答：  不可以

理由如下：

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

//例如下面错误示例：

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

//正确写法

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

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

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

//占位时
{
    path:"/search/:keyword",//占位了
    component:Search,
    name:"search"
}

//路由跳转时
this.$router.push({name:'search',query:{keyword:this.keyword.toUpperCase()}})

答：如果路由要求传递params参数，但是你没有传递，URL会有问题！   

如：http://localhost:8080/#/?k=QWE（错误的）

        http://localhost:8080/#/search?k=QWE(正确的)

        我们应该在配置路由的时候，在占位的后面加上一个问号。

{
    path:"/search/:keyword?",//占位后面加上问号
    component:Search,
    name:"search"
}

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

答：使用undefined解决：params参数可以传递或者不传递（空的字符串）

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