【前端学习】vue调试助手安装+面试题

1.vue调试工具安装

（1）官网
https://vuejs.org/v2/api/index.html#devtools
右上角ecosystem下的devtools

(2)打开git bash
git clone https://github.com/vuejs/devtools.git

（3）cd devtools/
（4）npm install
（5）npm run build
（6）打开chrome 的更多工具—扩展程序—打开开发者模式—点击“加在已解压的扩展程序”

（7）选择shell-chrome文件夹
安装完毕

运行vue程序

2.面试题

路由传参的几种形式
// 第一种：字符串形式

 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()}})

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

答：不可以。官网文档特意说明了这种情况，路径参数缺失是无法匹配path里面的占位符。可以用name形式，不能用path形式。

问题2：如何指定params参数可传可不传?

答：在配置路由的时候，在占位的后面加上一个问号。（正则中代表可有可无）

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

答：使用underfined。

问题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};
 }