Vue 导航守卫：了解路由生命周期

前端

2023-09-19 08:27:23

Vue.js 的导航守卫是一种强大的机制，可让您拦截和控制路由导航过程。通过使用导航守卫，您可以执行各种操作，例如：

根据特定条件允许或阻止导航
在导航发生之前或之后执行某些操作
从一个路由导航到另一个路由时传递数据
显示加载指示器或模态窗口

导航守卫类型

Vue.js 提供了三种类型的导航守卫：

全局导航守卫：适用于所有路由
基于路由的导航守卫：适用于特定路由或一组路由
组件内导航守卫：适用于特定组件

全局导航守卫

全局导航守卫是适用于所有路由的导航守卫。它们在路由配置对象中定义，如下所示：

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home
    }
  ],
  beforeEach: (to, from, next) => {
    // 在导航发生之前执行某些操作
  }
})

beforeEach 函数是全局导航守卫。它在每次导航发生之前都会被调用，无论导航的目标路由是什么。您可以使用 to 和 from 参数来访问导航的源路由和目标路由。

基于路由的导航守卫

基于路由的导航守卫适用于特定路由或一组路由。它们在路由配置对象中定义，如下所示：

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home,
      beforeEnter: (to, from, next) => {
        // 在导航发生之前执行某些操作
      }
    }
  ]
})

beforeEnter 函数是一个基于路由的导航守卫。它仅在导航到 /home 路由时被调用。您可以使用 to 和 from 参数来访问导航的源路由和目标路由。

组件内导航守卫

组件内导航守卫适用于特定组件。它们在组件选项对象中定义，如下所示：

export default {
  beforeRouteEnter (to, from, next) {
    // 在导航发生之前执行某些操作
  },
  beforeRouteUpdate (to, from, next) {
    // 在组件更新路由时执行某些操作
  },
  beforeRouteLeave (to, from, next) {
    // 在组件离开路由时执行某些操作
  }
}

beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave 函数都是组件内导航守卫。它们分别在组件进入路由、更新路由和离开路由时被调用。您可以使用 to 和 from 参数来访问导航的源路由和目标路由。

导航守卫的应用

导航守卫可用于实现各种功能，例如：

权限控制：您可以使用导航守卫来控制用户对某些路由的访问权限。例如，您可以创建一个导航守卫来检查用户是否已登录，如果用户未登录，则阻止他们访问需要登录才能访问的路由。
数据预取：您可以使用导航守卫来预取数据，以便在用户导航到某个路由时立即显示数据。例如，您可以在导航到 /user/:id 路由时预取用户数据。
显示加载指示器：您可以使用导航守卫来显示加载指示器，以便在导航发生时向用户提供反馈。例如，您可以在导航到某个路由时显示加载指示器，并在数据加载完成后隐藏加载指示器。
重定向：您可以使用导航守卫来重定向用户到另一个路由。例如，您可以在导航到 /old-route 路由时重定向用户到 /new-route 路由。