当在Vue.js中通过系统路由进行导航跳转时，如何在跳转前取消所有正在进行的网络请求？

在Vue.js中，当你需要在路由导航跳转前取消所有正在进行的网络请求，通常可以利用`axios`这样的HTTP库提供的拦截器机制。首先，在项目的入口文件或`main.js`中设置一个全局的axios实例，并添加一个请求拦截器，该拦截器会在每次发送请求之前检查当前是否正在导航。

import axios from 'axios';

// 创建一个axios实例并配置全局拦截器
const instance = axios.create({
  // ... 其他axios配置项
});

instance.interceptors.request.use(
  async (config) => {
    if (!router.app.$route.meta.isNotNeedCancelRequest) { // 判断是否需要取消请求
      const activeRequests = store.state.activeRequests; // 假设store里有记录所有活跃请求的状态
      if (activeRequests.length > 0) {
        for (let request of activeRequests) {
          if (request.url === config.url) {
            await request.cancel(); // 取消匹配到的请求
          }
        }
      }
    }
    return config;
  },
  (error) => {
    // 请求失败处理
    return Promise.reject(error);
  }
);

// 然后在需要的地方使用这个实例发送请求
export default instance;

然后，在组件中，你可以访问`this.$axios`进行请求，并在`beforeRouteLeave`钩子或路由元信息(`meta`)中设置`isNotNeedCancelRequest`标志来控制是否需要取消请求：

// 在组件内
beforeRouteLeave(to, from, next) {
  if (/* 某些条件触发取消 */ ) {
    this.$axios.CancelToken.source.cancellable; // 取消当前请求
    next(true); // 跳转并返回true表示已阻止离开
  } else {
    next();
  }
}

// 或者在路由配置中
{
  path: '/your-path',
  meta: { isNotNeedCancelRequest: false },
  component: YourComponent,
}