vue-router设置拦截，同一个请求第二次发送的时候取消第一次请求

在 Vue.js 中使用 Vue Router 设置拦截器，并在同一个请求的第二次发送时取消第一次请求，可以通过以下步骤实现：

1. 首先，确保你已经安装了 `vue-router` 包。如果没有安装，可以使用以下命令进行安装：

   npm install vue-router

2. 在你的项目中创建一个拦截器文件（例如 `interceptor.js`），并编写拦截逻辑。以下是一个示例：

   import axios from 'axios';
   import router from './router';

   let pendingRequest = null;

   // 创建请求拦截器
   axios.interceptors.request.use(config => {
     // 取消之前的请求
     if (pendingRequest) {
       pendingRequest.cancel('取消重复请求');
     }

     // 创建新的取消令牌
     const CancelToken = axios.CancelToken;
     config.cancelToken = new CancelToken(cancel => {
       pendingRequest = { cancel };
     });

     return config;
   });

   // 创建响应拦截器
   axios.interceptors.response.use(response => {
     pendingRequest = null;
     return response;
   }, error => {
     pendingRequest = null;
     return Promise.reject(error);
   });

   export default axios;

3. 在你的 Vue 项目中，将上述拦截器作为默认的 HTTP 客户端进行使用。在主入口文件（例如 `main.js`）中导入和使用拦截器：

   import Vue from 'vue';
   import App from './App.vue';
   import router from './router';
   import axios from './interceptor';

   Vue.config.productionTip = false;

   new Vue({
     router,
     render: h => h(App)
   }).$mount('#app');

   Vue.prototype.$http = axios; // 将拦截器作为全局的 HTTP 客户端

4. 在需要发送请求的组件中，使用 `$http` 对象（拦截器导出的对象）来发送请求。例如：

   export default {
     methods: {
       fetchData() {
         this.$http.get('/api/data')
           .then(response => {
             console.log('请求成功', response.data);
           })
           .catch(error => {
             console.error('请求失败', error);
           });
       }
     }
   };

通过上述步骤，我们创建了一个拦截器，用于在请求被发送前检查是否有之前的请求正在进行中，并在同一个请求的第二次发送时取消第一次请求。这样可以避免重复请求的问题。同时，拦截器还处理了响应的情况，将 `pendingRequest` 设置为 `null`。

请注意，这是一个简化的示例，你可以根据自己的需求进行适当的修改和扩展。另外，你还可以根据具体的业务需求，在拦截器中添加其他逻辑，如错误处理、身份验证等。