导航守卫是Vue路由中非常有用的功能，它允许我们在路由导航过程中执行一些特定的操作。无论是在用户访问特定页面之前还是离开页面之前，我们都可以使用导航守卫来进行验证、授权、重定向和其他一些操作。
在Vue3中，导航守卫的设置相对于Vue2有了一些变化。Vue3使用了一个新的路由系统，称为Vue Router 4。在这个新版本中，我们可以使用不同的方式来设置导航守卫代码。让我们一起来看看吧！
首先，我们需要确保已经安装了Vue Router 4。如果你还没有安装，可以通过以下命令来安装它：
npm install vue-router@4
安装完成后，我们可以在Vue应用程序的入口文件中导入Vue Router，并创建一个新的路由实例。这个实例将包含我们的路由配置和导航守卫代码。
import { createRouter, createWebHistory } from 'vue-router' const router = createRouter({ history: createWebHistory(), routes: [ // 路由配置 ] }) export default router
现在，我们已经有了一个基本的路由实例，接下来我们可以开始设置导航守卫了。
在Vue3中，我们可以使用beforeEach、beforeResolve和afterEach这三个方法来设置导航守卫。这些方法分别在路由导航之前、解析导航之前和导航完成之后被调用。
让我们先来看看beforeEach方法。它接收一个回调函数作为参数，在路由导航之前执行该函数。我们可以在这个函数中进行一些验证或者重定向操作。如果我们想要阻止路由导航，可以在回调函数中调用next(false)。下面是一个例子：
router.beforeEach((to, from, next) => { // 验证用户是否已登录 if (!isAuthenticated()) { // 如果用户未登录，重定向到登录页面 next('/login') } else { // 用户已登录，继续路由导航 next() } })
接下来，我们来看看beforeResolve方法。它与beforeEach类似，但是在路由导航之前解析导航之前被调用。这意味着在beforeResolve方法中，我们可以等待异步操作完成后再继续路由导航。下面是一个例子：
router.beforeResolve((to, from, next) => { // 执行一些异步操作，比如请求用户权限信息 fetchUserPermissions().then(() => { // 异步操作完成后继续路由导航 next() }) })
最后，我们来看看afterEach方法。它在导航完成之后被调用，无论是成功还是失败。我们可以在这个方法中执行一些清理操作或者发送一些统计信息。下面是一个例子：
router.afterEach((to, from) => { // 发送统计信息 sendAnalytics(to.path) })
以上就是在Vue3中设置导航守卫代码的基本方法。当然，还有其他一些高级用法，比如设置路由级别的导航守卫和组件级别的导航守卫。如果你对这些感兴趣，可以查阅Vue Router 4的官方文档。
希望本文对你理解Vue3中的导航守卫有所帮助。谢谢阅读，如果你有任何问题或者建议，请在评论中留言。再见！
