vue3 router.beforeEach调接口

在Vue3中，可以使用`router.beforeEach`方法来在路由切换之前调用接口。这个方法可以用于进行路由拦截和权限验证。下面是一个简单的示例代码：

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

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 路由配置
  ]
})

router.beforeEach(async (to, from, next) => {
  // 调用接口进行权限验证或其他逻辑
  try {
    const response = await axios.get('/api/checkAuth')
    if (response.data.authenticated) {
      // 如果验证通过，则继续路由切换
      next()
    } else {
      // 如果验证不通过，则跳转到登录页或其他页面
      next('/login')
    }
  } catch (error) {
    console.error(error)
    // 处理错误情况
    next(false)
  }
})

export default router

在上面的代码中，`router.beforeEach`方法会在每次路由切换之前调用。你可以在该方法内部调用接口进行权限验证，根据接口的返回结果来决定是否继续路由切换或跳转到其他页面。注意要使用`async`和`await`来处理异步请求，并通过`next`方法来控制路由切换。