vue3路由导航守卫统一封装

在Vue3中，可以通过在router/index.js文件中定义导航守卫来实现路由导航守卫的统一封装。具体步骤如下：

1. 在router/index.js文件中引入createRouter和createWebHistory方法以及路由列表和导航守卫：

import { createRouter, createWebHistory } from 'vue-router'
import { AppRoutes } from '@/router/route'
import { beforeEach, afterEach } from '@/router/guards'

2. 创建路由实例并定义路由列表和导航守卫：

const router = createRouter({
  history: createWebHistory(),
  routes: AppRoutes
})

router.beforeEach(beforeEach)
router.afterEach(afterEach)

3. 将路由实例导出：

export default router

4. 在main.js文件中引入路由实例并挂载到Vue实例上：

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

createApp(App).use(router).mount('#app')

相关问题：