vue3 axios 路由加载

对于 Vue3 项目中的路由加载，可以使用 Vue Router 4.x 版本，并结合 Axios 进行实现。

首先，在项目中安装 Vue Router 和 Axios：

npm install vue-router axios

然后，在 Vue3 项目中，可以在 main.js 中进行配置：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'

const app = createApp(App)
app.use(router)

// 设置 Axios 的基础配置
axios.defaults.baseURL = 'https://api.example.com'
axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('token')

// 在 Vue3 中，可以通过 app.config.globalProperties.$axios 访问 Axios 实例
app.config.globalProperties.$axios = axios

app.mount('#app')

在上述代码中，通过 `app.config.globalProperties.$axios` 将 Axios 实例挂载到全局变量中，方便在组件中进行使用。

接下来，在路由配置中，可以使用 Axios 进行路由加载：

import { createRouter, createWebHistory } from 'vue-router'
import axios from 'axios'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: () => import('@/views/Home.vue'),
      meta: {
        requiresAuth: true
      }
    },
    {
      path: '/login',
      name: 'Login',
      component: () => import('@/views/Login.vue')
    }
  ]
})

// 路由加载前，判断路由是否需要进行身份验证
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth) {
    axios.get('/api/user')
      .then(response => {
        if (response.status === 200) {
          next()
        } else {
          next('/login')
        }
      })
      .catch(() => {
        next('/login')
      })
  } else {
    next()
  }
})

export default router

在上述代码中，通过 `beforeEach` 钩子函数，在路由加载前进行身份验证。如果路由需要进行身份验证，则发送一个 GET 请求到 `/api/user` 接口进行验证，如果验证成功，则加载路由，否则跳转到登录页面。

需要注意的是，在实际开发中，需要根据实际情况进行路由加载和身份验证的处理。