Vue Router 的导航守卫怎么使用

Vue Router 是 Vue.js 官方提供的路由管理器，它与 Vue.js 核心深度集成，使得构建单页面应用（SPA）变得非常简单。在 Vue Router 中，导航守卫（Navigation Guards）是一组非常重要的功能，它允许我们在路由导航过程中进行一些控制，比如权限验证、数据预加载、页面跳转前的确认等。

本文将详细介绍 Vue Router 的导航守卫的使用方法，包括全局守卫、路由独享守卫和组件内守卫，并通过示例代码帮助读者更好地理解和应用这些功能。

1. 导航守卫概述

导航守卫是 Vue Router 提供的一种机制，允许我们在路由导航的不同阶段执行一些操作。导航守卫主要分为三类：

1. 全局守卫：作用于所有路由的守卫。
2. 路由独享守卫：作用于特定路由的守卫。
3. 组件内守卫：作用于特定组件的守卫。

接下来，我们将分别介绍这三种导航守卫的使用方法。

2. 全局守卫

全局守卫是作用于所有路由的守卫，主要包括以下几种：

• beforeEach：在路由跳转之前执行。
• beforeResolve：在路由跳转之前执行，但在所有组件内守卫和异步路由组件被解析之后。
• afterEach：在路由跳转之后执行。

2.1 beforeEach

beforeEach 是最常用的全局守卫，它会在每次路由跳转之前执行。我们可以在这个守卫中进行一些权限验证、页面跳转前的确认等操作。

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // to: 即将进入的目标路由对象
  // from: 当前导航正要离开的路由对象
  // next: 必须调用该方法来 resolve 这个钩子

  if (to.path === '/admin' && !isAuthenticated) {
    // 如果用户未认证，重定向到登录页面
    next('/login')
  } else {
    // 继续导航
    next()
  }
})

在上面的代码中，我们通过 beforeEach 守卫来检查用户是否已经认证。如果用户未认证且试图访问 /admin 页面，则会被重定向到 /login 页面。

2.2 beforeResolve

beforeResolve 守卫与 beforeEach 类似，但它会在所有组件内守卫和异步路由组件被解析之后执行。这意味着你可以在这个守卫中确保所有的异步组件都已经加载完成。

router.beforeResolve((to, from, next) => {
  // 确保所有异步组件都已经加载完成
  next()
})

2.3 afterEach

afterEach 守卫在路由跳转之后执行，通常用于记录页面访问日志、页面滚动位置重置等操作。

router.afterEach((to, from) => {
  // 记录页面访问日志
  logPageView(to.path)
})

3. 路由独享守卫

路由独享守卫是作用于特定路由的守卫，主要包括 beforeEnter 守卫。它可以在路由配置中直接定义。

const router = new VueRouter({
  routes: [
    {
      path: '/admin',
      component: Admin,
      beforeEnter: (to, from, next) => {
        if (!isAuthenticated) {
          next('/login')
        } else {
          next()
        }
      }
    }
  ]
})

在上面的代码中，我们为 /admin 路由定义了一个 beforeEnter 守卫，用于检查用户是否已经认证。如果用户未认证，则会被重定向到 /login 页面。

4. 组件内守卫

组件内守卫是作用于特定组件的守卫，主要包括以下几种：

• beforeRouteEnter：在组件被渲染之前执行。
• beforeRouteUpdate：在当前路由改变，但该组件被复用时执行。
• beforeRouteLeave：在离开当前路由之前执行。

4.1 beforeRouteEnter

beforeRouteEnter 守卫在组件被渲染之前执行。由于此时组件实例还未创建，因此无法访问 this。不过，我们可以通过 next 回调来访问组件实例。

export default {
  beforeRouteEnter(to, from, next) {
    next(vm => {
      // 通过 `vm` 访问组件实例
      console.log(vm.someData)
    })
  }
}

4.2 beforeRouteUpdate

beforeRouteUpdate 守卫在当前路由改变，但该组件被复用时执行。例如，当用户从 /user/1 跳转到 /user/2 时，User 组件会被复用，此时 beforeRouteUpdate 守卫会被触发。

export default {
  beforeRouteUpdate(to, from, next) {
    // 重新获取用户数据
    this.fetchUserData(to.params.id)
    next()
  }
}

4.3 beforeRouteLeave

beforeRouteLeave 守卫在离开当前路由之前执行。通常用于提示用户保存未保存的数据或确认离开页面。

export default {
  beforeRouteLeave(to, from, next) {
    if (this.unsavedChanges) {
      const answer = window.confirm('您有未保存的更改，确定要离开吗？')
      if (answer) {
        next()
      } else {
        next(false)
      }
    } else {
      next()
    }
  }
}

在上面的代码中，如果用户有未保存的更改，则会弹出一个确认对话框。如果用户选择离开，则继续导航；否则，取消导航。

5. 导航守卫的执行顺序

在 Vue Router 中，导航守卫的执行顺序如下：

1. 全局 beforeEach 守卫：在所有路由跳转之前执行。
2. 路由独享 beforeEnter 守卫：在特定路由跳转之前执行。
3. 组件内 beforeRouteEnter 守卫：在组件被渲染之前执行。
4. 全局 beforeResolve 守卫：在所有组件内守卫和异步路由组件被解析之后执行。
5. 全局 afterEach 守卫：在路由跳转之后执行。

6. 示例：完整的导航守卫应用

下面是一个完整的示例，展示了如何使用导航守卫来实现用户认证和页面访问日志记录。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import Admin from './components/Admin.vue'
import Login from './components/Login.vue'

Vue.use(VueRouter)

const isAuthenticated = false // 假设用户未认证

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/admin',
      component: Admin,
      beforeEnter: (to, from, next) => {
        if (!isAuthenticated) {
          next('/login')
        } else {
          next()
        }
      }
    },
    {
      path: '/login',
      component: Login
    }
  ]
})

router.beforeEach((to, from, next) => {
  console.log(`Navigating from ${from.path} to ${to.path}`)
  next()
})

router.afterEach((to, from) => {
  console.log(`Navigated to ${to.path}`)
})

export default router

在上面的代码中，我们定义了一个简单的路由配置，并使用 beforeEnter 守卫来检查用户是否已经认证。如果用户未认证且试图访问 /admin 页面，则会被重定向到 /login 页面。同时，我们还使用了 beforeEach 和 afterEach 守卫来记录页面访问日志。

7. 总结

Vue Router 的导航守卫为我们提供了强大的路由控制能力，使得我们可以在路由导航的不同阶段执行一些操作。通过合理使用全局守卫、路由独享守卫和组件内守卫，我们可以实现诸如权限验证、数据预加载、页面跳转前的确认等功能。

在实际开发中，导航守卫的使用非常灵活，可以根据具体需求进行组合和扩展。希望本文的介绍能够帮助读者更好地理解和应用 Vue Router 的导航守卫功能。