vue3中怎么在路由开始前调取一个接口？

Question

我想在路由开始之前调一个请求，请求完成后在执行下面的代码，这个怎么做？？？

想在这里调一个请求，请求完成后再执行下面的，并暴露service
const service: AxiosInstance = axios.create({
  baseURL: PATH_URL, // api 的 base_url
  timeout: config.request_timeout // 请求超时时间
})

// request拦截器
service.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    if (
      config.method === 'post' &&
      (config.headers as AxiosRequestHeaders)['Content-Type'] ==='application/x-www-form-urlencoded') {
      config.data = qs.stringify(config.data)
    }
    const token=wsCache.get(appStore.getUserInfo)?.Token;
    if(token){
      (config.headers as AxiosRequestHeaders)['Authorization'] = token
    }

    // ;(config.headers as AxiosRequestHeaders)['Token'] = 'test test'
    // get参数编码
    if (config.method === 'get' && config.params) {
      let url = config.url as string
      url += '?'
      const keys = Object.keys(config.params)
      for (const key of keys) {
        if (config.params[key] !== void 0 && config.params[key] !== null) {
          url += `${key}=${encodeURIComponent(config.params[key])}&`
        }
      }
      url = url.substring(0, url.length - 1)
      config.params = {}
      config.url = url
    }
    return config
  },
  (error: AxiosError) => {
    // Do something with request error
    console.log(error) // for debug
    Promise.reject(error)
  }
)

// response 拦截器
service.interceptors.response.use(
  (response: AxiosResponse<any>) => {
    if (response.config.responseType === 'blob') {
      // 如果是文件流，直接过
      return response
    } else if (response.data.code === result_code) {
      return response.data
    } else {
      //ElMessage.error(response.data.msg)
      return response.data
    }
  },
  (error: AxiosError) => {
    console.log('err' + error) // for debug
    //ElMessage.error(error.message)
    return Promise.reject(error)
  }
)

export { service }

Answer 1

路由控制就比较简单了。本身路由是支持钩子异步，只需要等你的接口返回成功之后再去 return true 即可

Answer 2

先理解你的问题，其实你是要在进入路由之前，通过API拿到baseURL 并应用到axios中，然后在进去路由。

import { createApp } from 'vue'
// 从一个单文件组件中导入根组件
import App from './App.vue'

let startApp = function () {
axios.get("/config.json").then((res) => {
// 基础地址
Vue.prototype.BASE_URL = res.data.BASE_URL;
axios.defaults.baseURL = Vue.prototype.BASE_URL;

const app = createApp(App)

app.mount('#app')
}
startApp();

或者你用路由守卫 或 axios拦截器 配合全局属性判断是否已经拿到了BASE_URL，没有则请求，有则pass，如果请求中就放到then等待。

Answer 3

主要我是想把路由接口的前缀通过调用外部文件的参数得到，这样我生成一次后只要在外面修改调用的前缀，这样多个人用自己在一个外部文件修改一下域名地址就行。

我觉得你是不是可以考虑使用环境变量？

相关阅读
模式和环境变量 | Vue CLI
环境变量和模式 | Vite 官方中文文档