12.9日学习总结

1.安装less和less-loader

cnpm install  --save less less-loader@5

less-loader的版本建议不要安装太高。

2.声明式导航，可以进行页面跳转

<router-link to="/home"></router-link>

相当于a标签，但是一定要加上to

3.编程式导航  this.$router.push|replace，可以进行页面跳转

this.$router.push("/home")

声明式导航能做的，编程式导航都可以，并且编程式导航还可以处理业务逻辑，比如在进行登录跳转时，将用户名和密码保存起来。

4.组件的显示和隐藏

在配置路由时，给路由添加路由元信息meta

//router.js中配置
{
    path: '/register',
    component: Register,
    meta: {
      isHideFooter: true
    }
 },

App.vue中配置
<!-- 利用路由元信息解决当前问题好处：一行代码就可以解决 -->
    <Footer v-show="$route.meta.isShow" />

5.路由传参，参数的几种写法

1.params参数，属于路径的一部分，需要注意的是，在配置路由的时候需要占位

2.query参数，不属于路径的一部分，类似于ajax的queryString，/home?k1=v1&k2=v2

 

 

 

 

 

  6.编程式路由跳转到当前路由（参数不变），多次执行会抛出NavigationDuplicate错误

解决办法：在router.js里面加入

//需要重写VueRouter.prototype原型对象身上的push|replace方法
//先把VueRouter.prototype身上的push|replace方法进行保存一份
let originPush = VueRouter.prototype.push;
let originReplace = VueRouter.prototype.replace;
//重写VueRouter.prototype身上的push方法了
VueRouter.prototype.push = function(location, resolve, reject) {
  //第一个形参：路由跳转的配置对象（query|params）
  //第二个参数：undefined|箭头函数（成功的回调）
  //第三个参数:undefined|箭头函数（失败的回调）
  if (resolve && reject) {
    //push方法传递第二个参数|第三个参数（箭头函数）
    //originPush：利用call修改上下文，变为(路由组件.$router)这个对象，第二参数：配置对象、第三、第四个参数：成功和失败回调函数
    originPush.call(this, location, resolve, reject);
  } else {
    //push方法没有产地第二个参数|第三个参数
    originPush.call(
      this,
      location,
      () => {},
      () => {}
    );
  }
};
//重写VueRouter.prototype身上的replace方法了
VueRouter.prototype.replace = function(location, resolve, reject) {
  if (resolve && reject) {
    originReplace.call(this, location, resolve, reject);
  } else {
    originReplace.call(
      this,
      location,
      () => {},
      () => {}
    );
  }
};

调用：this.$router.push({ name: "search", params: this.$route.params });

this.$router.push({name:'addcartsuccess',query:{skuNum:this.skuNum}});