【面试题】Vue 路由传递参数相关面试题

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

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

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

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

如果配置路由的时候，占位了（params参数），但是路由跳转的时候没有传递，路径就会出现问题。形如http://localhost:8080/#/?k=QWE

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

那如何指定params参数可传可不传？可以在配置路由的时候，在占位的后面加上一个问号

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

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

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

可以的，有三种写法。

方法一：布尔值写法，只能传递params参数

// 在配置路由的时候配置props
{
    path:"/search/"keyword?",
    component: Search,
    meta: {show: true},
    name: 'search',
    props: true
}

方法二：对象写法

{
    // 对象写法：额外给路由组件传递一些props
    props:{a:1, b:2}
}

方法三： 函数写法

{
    // 函数写法：可以将params参数、query参数通过props传递给路由组件
    props:($route)=>({keyword: $route.params.keywored, k:$route.query.k})
}