接上文
以下是除了对目录内容进行分析以外 学到的新的知识点
（十）解决连续点击使用push/replace会报错
–路由跳转有两种形式:声明式导航、编程式导航
–声明式导航没有这类问题的，因为vue-router底层已经处理好了
当使用编程式导航 例如
this.$router.push({name:"Search",query:{keyword:this.keyword}})
多次点击就会出现以下警告
原因：push是一个promise，promise需要传递成功和失败两个参数，我们的push中没有传递。
方法：this.$router.push({name:‘Search’,params:{keyword:“…”||undefined}},()=>{},()=>{})后面两项分别代表执行成功和失败的回调函数
但是这样写 也就只有这一个push/replace可以多次点击 治标不治本
解决方法 ：重写push/replace方法
import Vue from'vue' import VueRouter from'vue-router' import routes from './routes' // 每当点击两次搜索按钮的时候 就会报错 // 原因是因为push||replace方法 // 此时需要自己手写一个push||replace方法 let oringPush = VueRouter.prototype.push; let oringReplace = VueRouter.prototype.replace; // 此时重写push||replace // 第一个参数是告诉push方法 你往哪里跳转 VueRouter.prototype.push = function(location,resolve,reject) { // 当resolve 和 reject 存在的时候 即第一次点击的时候 if(resolve && reject){ oringPush.call(this, location, resolve, reject) }else { oringPush.call(this, location, ()=>{},()=>{}) } } VueRouter.prototype.replace = function(location,resolve,reject) { // 当resolve 和 reject 存在的时候 即第一次点击的时候 if(resolve && reject){ oringReplace.call(this, location, resolve, reject) }else { oringReplace.call(this, location, ()=>{},()=>{}) } } //此时 push||replace方法遇到连续点击两次就不会报错了
在Router文件夹中的index.js 添加这段代码 即可彻底根治这个问题
（十一）二次封装axios
11.1 为什么要二次封装axios？
二次封装axios主要是为了用到请求拦截器和响应拦截器
拦截请求：可以在请求之前处理一些业务(比如为每个请求带上相应的参数，时间戳等）
拦截响应：可以在服务器返回数据之后处理一些事情（比如对返回的状态进行判断，token是否过期等）
通常我们的项目会越做越大,页面也会越来越多,随之而来的是接口数量的增加。api统一管理,不管接口有多少,所有的接口都可以非常清晰,容易维护。
11.2 如果二次封装axios?
// 对axios二次封装 import axios from 'axios' const requests = axios.create({ // 配置对象 // 基础路径，发送请求的时候，路径当中会出现api baseURL:'/api', timeout:5000 })
11.3 如何配置请求拦截器和响应拦截器
根据上述的二次封装的axios添加请求拦截器和响应拦截器
// 添加请求拦截器 requests.interceptors.request.use((config)=>{ // 在发送请求之前做些什么 return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); }); // 添加响应拦截器 requests.interceptors.response.use(function (response) { // 2xx 范围内的状态码都会触发该函数。 // 对响应数据做点什么 return response.data; }, function (error) { // 超出 2xx 范围的状态码都会触发该函数。 // 对响应错误做点什么 return Promise.reject(error); });
1、每个请求都带上的参数，比如token，时间戳等。
2、对返回的状态进行判断，比如token是否过期，统一判断返回码等。
（十二）nprogress进度条插件
- 打开一个页面时，往往会伴随一些请求，并且会在页面上方出现进度条。它的原理时，在我们发起请求的时候开启进度条，在请求成功后关闭进度条，所以只需要在request.js中进行配置。
- 安装nprogress
yarn add nprogress
- 如何使用
在对axios进行二次封装的时候
import nprogress from 'nprogress' // 引入进度条样式 import "nprogress/nprogress.css"
在请求和响应拦截器中添加
// 添加请求拦截器 requests.interceptors.request.use((config)=>{ // 在发送请求之前做些什么 //引入进度条 nprogress.start() return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); }); // 添加响应拦截器 requests.interceptors.response.use(function (response) { // 2xx 范围内的状态码都会触发该函数。 // 对响应数据做点什么 // 进度条结束 nprogress.done() return response.data; }, function (error) { // 超出 2xx 范围的状态码都会触发该函数。 // 对响应错误做点什么 return Promise.reject(error); });
(十三) loadsh插件防抖和节流
13.1 安装loadsh
yarn add loadsh
防抖：用户操作很频繁，但是只执行一次，减少业务负担。
节流：用户操作很频繁，但是把频繁的操作变为少量的操作，使浏览器有充分时间解析代码
13.2使用方法
import throttle from "lodash/throttle"; //防抖 getList:debounce(function() { this.getUserList() },2000), /节流 getList:throttle(function() { this.getUserList() },2000),
其中getList 是你要加防抖/节流的函数名字 2000是每多少秒触发一次
