使用vue+axios+vue-router实现路由切换时取消正在进行的ajax请求

可以使用axios的CancelToken和interceptor来实现在路由切换时取消正在进行的ajax请求。

首先，需要在axios的请求中添加一个CancelToken：

import axios from 'axios';

const source = axios.CancelToken.source(); // 创建一个CancelToken

axios.get('/api/data', {
  cancelToken: source.token // 将CancelToken添加到请求中
}).then(response => {
  console.log(response.data);
}).catch(error => {
  if (axios.isCancel(error)) {
    console.log('Ajax request canceled');
  } else {
    console.log(error);
  }
});

然后，需要在vue-router的路由切换前检查是否有正在进行的ajax请求，并取消它们：

import axios from 'axios';

router.beforeEach((to, from, next) => {
  // 取消正在进行的ajax请求
  axios.cancel && axios.cancel('Route changed');
  
  // 创建一个新的CancelToken
  axios.cancel = axios.CancelToken.source();

  next();
});

最后，需要在axios的interceptor中检查是否需要取消请求：

import axios from 'axios';

axios.interceptors.request.use(config => {
  // 如果请求中包含了CancelToken，则不进行检查
  if (config.cancelToken) {
    return config;
  }

  // 检查是否需要取消请求
  axios.cancel && axios.cancel('Request canceled');

  // 创建一个新的CancelToken
  axios.cancel = axios.CancelToken.source();

  config.cancelToken = axios.cancel.token;

  return config;
});

这样，在路由切换时，所有正在进行的ajax请求都会被取消。