Vue面试题笔记

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

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

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

路由传递参数的三种方式：

第一种：字符串形式

this.$router.push("/search" + this.keyword + "?k=" + this.keyword.toUpperCase());

第二种：模板字符串

this.$router.push(`/search/${this.keyword}?k=${this.keyword.toUpperCase()}`)

第三种：对象

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

 

面试题：2.如何指定params参数可传可不传？

答：比如：配置路由的时候占位了(params参数)，但是路由调转的时候就不传递。路劲就会出现问题

hhtp://localhost:8000/#/?k=QWE

http://localhost:8000/#/search?k=QWE

如果路由要求传递params参数，但是你不传递params参数，就会发现URL有问题，如果只当params参数可以传递或者不传递，在配置路由的时候，在占位的后面加上一个问号【params可以传递或者不传递】

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

 

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

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

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

 

面试题：4.路由组件能不能传递props数据？

答：可以的：三种写法

第一种：布尔值写法params     props:true

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

第三种：函数写法：可以params参数，query参数，通过props

props:($route)=>{

　　　　return {keyword:$route.params.keyword,k:$route.query.k}

}