js vue系统路由跳转时取消所有接口

在Vue.js中，当进行系统路由跳转并希望取消之前的所有接口请求时，可以利用Vue Router提供的钩子函数和Vuex的状态管理来实现。以下是一个常见的做法：

1. **使用路由守卫** (Route Guards):
- `beforeEach` 钩子可以在每次导航开始前执行。你可以在这里检查当前的请求状态，如果有未完成的请求，可以使用axios等库的取消功能。

router.beforeEach((to, from, next) => {
  // 取消正在运行的请求
  store.dispatch('cancelAllRequests');

  // 其他导航逻辑...
  next();
});

在这里，`store.dispatch('cancelAllRequests')` 就是在 Vuex 中定义的一个 action，用于清空所有正在进行的请求。

2. **使用 Axios 的 cancelToken**:
如果你的 API 请求使用了 Axios，并且它们都返回了一个 CancelToken，那么可以在组件卸载或路由切换时手动取消它。

// 示例 Axios 调用
const request = axios.get('/api', { cancelToken });

// 组件销毁时取消请求
beforeDestroy() {
  request.cancel();
}

3. **全局拦截器（Global Interceptors）**:
Vue Router 提供了 `router.appNavigationHook`，可以注册一个全局导航拦截器来统一处理路由切换时的资源清理。

router.appNavigationHook('popstate', () => {
  // 取消请求...
});