vue再次进入页面不会再次调用接口请求问题

npm install axios -S

yarn add axios -S

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

import axios from 'axios'
const request = axios.create({
  // 接口的服务器基准路径
  baseURL: 'http://toutiao.itheima.net',
    // axios 默认会在内部这样来处理后端返回的数据
    // return JSON.parse(data)
  }]
})
// 请求拦截器
// Add a request interceptor
request.interceptors.request.use(function (config) {
  // 请求发起会经过这里
  // config：本次请求的请求配置对象
  const { user } = store.state
  if (user && user.token) {
    config.headers.Authorization = `Bearer ${user.token}`
  }
  // 注意：这里务必要返回 config 配置对象，否则请求就停在这里出不去了
  return config
}, function (error) {
  // 如果请求出错了（还没有发出去）会进入这里
  return Promise.reject(error)
})
// 响应拦截器
export default request

export const 自定义的名字 = data => {
  return request({
    method: '请求类型',
    url: 'api地址/${data}'
  })
}

export const 自定义的名字 = params => {
  return request({
    method: 'GET',
    url: 'api地址',
    params: {
            name: 'abc'
        }
  })
}

export const 自定义的名字 = params => {
  return request({
    method: 'GET',
    url: 'api地址',
    params: params // 可直接简写为params
  })
}

export const 自定义的名字 = data => {
  return request({
    method: 'POST',
    url: 'api地址',
    data: {
            name: 'abc'
        }
  })
}

export const 自定义的名字 = data => {
  return request({
    method: 'POST',
    url: 'api地址',
    data: data // 可直接简写为data
  })
}

 async 处理函数名 (blob) {
      try {
        // 错误的用法
        // 如果接口要求 Content-Type 是 application/json
        // 则传递普通 JavaScript 对象
        // updateUserPhoto({
        //   photo: blob
        // })
        // 如果接口要求 Content-Type 是 multipart/form-data
        // 则你必须传递 FormData 对象
        const formData = new FormData()
        formData.append('接口参数名', blob)
        const { data } = await 处理函数名(formData)
         } catch (err) {
            // 。。。
      }