vue之小知识罗列

一、src文件（程序代码文件）的文件存放位置：

   1.assets文件夹，一般也是放静态资源的（一般是放多个组件公用的静态资源），但是，放在assets文件夹中的资源，在webpack打包的时候会当作一个模块，打包到js文件中去；

    2.components文件夹，一般是防止非路由组件（全局组件）；

    3.App.vue 唯一的根组件，Vue中的组件都是 .vue文件；

    4.main.js 程序的入口文件，也是整个程序最先执行的问价；

    5.babel.config.js 配置文件(babel相关的)

    6.package.json文件:认为是项目的身份证，记录项目叫做什么，项目中有哪些依赖，项目怎么运行等；

    7.readme.md是项目运行说明，可以看下怎么运行指令

二、$router 和  $route 的区别

* $route 一般用来获取路由信息【路径、query、params等】

* $router 一般进行编程式导航进行路由跳转[push/replace]

三、路由跳转的方式：

* 声明式导航 router-link ,可以进行路由的跳转

* 编程式导航 push|replace,可以根据路由跳转,他的实质就是一个a标签,

注意:push 会产生历史记录，可以回退或者前进

replace 是覆盖不会产生历史记录

* 编程式导航可以进行一些逻辑校验；

* 声明式导航能做的，编程式导航都可以做；还能加入业务逻辑

1.编程式导航路由在跳转的到当前路由(参数不变的情况下)，多次执行会抛出vue-router.esm.js?3423:2065 Uncaught (in promise) NavigationDuplicated错误？

答：--声明式导航没有类似的问题，因为在vue-router底层已经处理了；

因为在vue-router3.5版本引入了Promise；this.$router.push()返回的是一个Promise对象，需要传入回调函数，捕获失败的时候的错误；

方法一：this.$router.push({},()=>{},()=>{})；

方法二：重写全局的push | replace 方法

//1.2 重写VueRouter.prototype.push方法
let originPush = VueRouter.prototype.push;
VueRouter.prototype.push = function (location, resolve, reject) {
  if (resolve && reject) {
    /* call方法和apply方法的区别：
      相同点：都可以调用一次函数，并改变一次函数的上下文，this指向
      不同点：call传参的时候，使用逗号隔开，apply是以数组形式传参
    */
    originPush.call(this, location, resolve, reject)
  } else {
    originPush.call(this, location, () => { }, () => { })
  }
};
/* 重写replace方法 */
let originReplace = VueRouter.prototype.replace;
VueRouter.prototype.replace = function (location, resolve, reject) {
  if (resolve && reject) {
    originReplace.call(this, location, resolve, reject)
  } else {
    originReplace.call(this, location, () => { }, () => { })
  }
};

四、路由传参的问题（面试题）

1.面试题一：params传参是否可以和path一起使用

答：params传参得方式，不可以结合path去跳转传参；只可以配合name得方式。进行跳转传参；

params传参得写法：{name:'',params:{key:value}}

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

答：在路由配置项中，路径占位符后面加上一个 ？

3.面试题三：如果params如果传参的是空字符串。如何解决？

答：使用undefined来解决；

this.$router.push(name:'search',params:{key:''||undefined},query:{k:'jack'});

使用undefined时，''空字符串的隐式转换是false；

4.面试题四：路由组件是否可以传递props数据？

答：可以，

* 在路由配置时配置props:true;但是只能接收params参数；

* 在配置路由的props项时，使用箭头函数的形式，返回参数

  props:($route)=>{keyword:$route.params.keyword,k:$route.query.k}