B站尚品汇项目面试题整理笔记

1、路由相关

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

答：不可以，对象写法中可以是name、path形式，但是path这种写法不能与params参数一起使用

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

上面的写法会报错，只能使用命名路由的方式，name和params一起使用：

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

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

如果路由要求传递params参数，但是在传递的时候不写，那么URL会有问题，只需要在配置路由时，在占位符的后面加上？即可表示params参数可传可不传：
 

        {
            path:'/search/:keyword?',
            component:Search,
            meta:{show:true},
            name:'search'
        },

1.3 params参数可传可不传，但是如果传递的是空串，如何解决？

答：可以使用undefined解决

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

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

答：可以，路由组件的props有3中写法：布尔值、对象、函数 ，官方推荐布尔值写法，其他两种写法耦合度较高。

当是布尔值时：只能传递params参数；

当是对象写法时：只能传递自定义静态数据，额外的数据；

当是函数时：可以传递params、query、自定义数据

{
    path:'/search/:keyword?',
    component:Search,
    meta:{show:true},
    name:'search',
    // props:true,
    // props:[{username:'haha'}],
    props($route){
        return{
            keyword:$route.params.keyword,
            k:$route.query.keyword,
        }
    }
},