一、重写push | replace
重写原因:编程式路由跳转到当前路由(参数不变),多次执行会抛出NavigationDuplicated的警告错误
(工作的时候想处理掉,不想处理对于你的程序没有任何影响)
第一种解决方案:是给push函数,传入相应的成功的回调与失败的回调
this.$router.push(
{name:'search',params:{keyword:this.keyword},()=>{
//可以传入成功的回调
},()=>{
//可以传入失败的回调
}
}
第一种解决方案可以暂时解决当前问题,但是以后再用push|replace还是会出现类似现象,因此我们需要从‘根’治病,即重写push | replace
/*
第一个参数:告诉原来方法,你往那里跳转(传递哪些参数)
第二个参数:成功回调
第三个参数:失败回调
call | apply 区别:
相同:都可以调用函数一次,都可以改变函数的上下文一次(this)
不同:call传递参数用逗号隔开,apply传递数组
*/
let originPush = VueRouter.prototype.push;
let originReplace = VueRouter.prototype.replace;
VueRouter.prototype.push = function(location, resolve, reject) {
if (resolve && reject) {
originPush.call(this, location, resolve, reject);
} else {
originPush.call(this, location, () => {}, () => {});
}
}
VueRouter.prototype.replace = function(location, resolve, reject) {
if (resolve && reject) {
originreplace.call(this, location, resolve, reject);
} else {
originreplace.call(this, location, () => {}, () => {});
}
}
二、axios二次封装搭配nprogress进度条使用
跨域:如果多次请求协议、域名、端口号有不同的地方,称之为跨域 解决办法:JSONP、CROS、代理
对于axios二次封装,本人也不太了解,只是参考了官网文档了解了一点点(doge!!!!)
axios官方文档:Axios 中文文档 | Axios 中文网 | Axios 是一个基于 promise 的网络请求库,可以用于浏览器和 node.js
//对于axios进行二次封装
import axios from "axios";
import nprogress from "nprogress";
//如果出现进度条没有显示:一定是你忘记了引入样式了
import "nprogress/nprogress.css";
//底下的代码也是创建axios实例
let requests = axios.create({
//基础路径
baseURL: "/api",
//请求不能超过5S
timeout: 5000,
});
//请求拦截器----在项目中发请求(请求没有发出去)可以做一些事情
requests.interceptors.request.use((config) => {
//进度条开始动
nprogress.start();
//config:配置对象,对象里面有一个属性很重要,headers请求头
return config;
});
//响应拦截器----当服务器手动请求之后,做出响应(相应成功)会执行的
requests.interceptors.response.use(res => {
//进度条结束
nprogress.done();
return res.data;
}, err => {
return Promise.reject(new Error('Fali'));
});
//这里的代码是暴露一个axios实例
export default requests;
三、API接口统一管理
封装一个JS模块,进行API接口统一管理,能方便维护
//当前这个模块:API进行统一管理
import requests from "./request";
//三级联动接口:/api/product/getBaseCategoryList GET 没有任何参数
export const reqCategoryList = () => {
return requests({
url: '/product/getBaseCategoryList', //因为配置了baseURL,所以/api可以省略
method: 'get'
})
}