vue 切换页面时取消之前页面图片发起的get请求

在 Vue 中，可以使用 `beforeRouteLeave` 钩子函数来实现页面切换时取消之前页面图片发起的 GET 请求。具体做法如下：

1. 在组件中定义 `beforeRouteLeave` 钩子函数：

beforeRouteLeave(to, from, next) {
  // 取消之前页面图片的 GET 请求
  this.$axios.cancelAll();
  next();
},

2. 在 `axios` 的拦截器中设置取消请求的方法：

import axios from 'axios';
import { CancelToken } from 'axios';

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

// 请求拦截器
axios.interceptors.request.use(
  config => {
    config.cancelToken = source.token;
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// 响应拦截器
axios.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    if (axios.isCancel(error)) {
      console.log('Request canceled', error.message);
    }
    return Promise.reject(error);
  }
);

// 取消请求方法
axios.cancelAll = () => {
  source.cancel('All requests canceled.');
};

当切换页面时，`beforeRouteLeave` 钩子函数会被触发，调用 `axios.cancelAll()` 方法取消之前页面图片的 GET 请求。同时，在 `axios` 的拦截器中设置了取消请求的方法，当请求被取消时，会在控制台输出提示信息。