现象：
最近访问前端页面发现一个问题，在回退页面的时候，点得很快，就会突然跳到一个其他页面，如：访问时候顺序是：A–>B–>C–D，回退的时候，本应该是：D–>C–>A，但是你不耐烦就点得很快，回退跳转实际是：D–>C–>A–>C。
原因：
在C页面没刷新出来就又点击回退，而C页面还在请求（状态为pending），等你回退到A页面，C页面请求返回了，又跳到了C页面。。。。

要解决这个，有一种方法就是“路由跳转取消正在pending的请求”，
1、 services.js文件，请求拦截器加：

// request 请求拦截器
axios.interceptors.request.use(
  config => {
    config.cancelToken = new axios.CancelToken(function (cancel) {
      store.commit('pushToken', {cancelToken: cancel})
    })
    return config
  }
)

2、store/index.js文件，使用vuex新建一个取消请求数组：

state:{
     cancelTokenArr: [] // 取消请求token数组
},
mutations:{
    pushToken (state, payload) {
      state.cancelTokenArr.push(payload.cancelToken)
    },
    clearToken ({ cancelTokenArr }) {
      console.log(cancelTokenArr);
      cancelTokenArr.forEach(item => {
        if(item){
          item('路由跳转取消请求')
        }
      })
      cancelTokenArr = []
    },
    emptyToken (state, payload) {
      state.cancelTokenArr = []
    }
  },

3、main.js文件，路由拦截器：

/* 路由拦截器 */
router.beforeEach((to, from, next) => {
  // 路由跳转，取消上一页面处于 pending 的网络请求
  store.commit('clearToken'); // 取消请求
  store.commit('emptyToken'); // 清空token数组
  /* 路由发生变化修改页面title */
  if (to.meta.title) {
    document.title = to.meta.title;
  }
  next()
});

————————————————
版权声明：本文为CSDN博主「_Delores_」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/lvshu_yuan/article/details/112320937