什么是导航守卫？

导航守卫用于控制路由的访问权限。例如，访问后台主页时，需要用户处于已登录状态，如果没有登录，则跳转到登录页面。用户在登录页面进行登录操作，若登录成功，则跳转到后台主页；若登录失败，则返回登录页面。

在登录功能中使用导航守卫的效果，如下图所示。

导航守卫主要分为全局导航守卫、导航独享守卫和组件导航守卫。

1. 全局导航守卫

包括全局前置守卫beforeEach()和全局后置守卫afterEach()，在路由即将改变前和改变后进行触发。

全局导航守卫会拦截每个路由规则，从而对每个路由进行访问权限的控制，定义全局导航守卫的示例代码如下。

const router = createRouter()
router.beforeEach((to, from, next) => {})   //定义全局前置守卫
router.afterEach((to, from, next) => {})     //定义全局后置守卫

每个全局导航守卫方法中接收3个形参：to、from和next。

• to：表示目标路由对象；

• from：表示当前导航正要离开的路由对象；

• next：next为函数，如果不接收next()函数，则默认允许用户访问每一个路由；如果接收了next()函数，则必须调用next()函数，否则不允许用户访问任何一个路由。

注意：

next()函数具有3种调用方式，分别为next()、next(false)和next('/')，其中，next()表示执行下一个钩子函数；next(false)表示强制停留在当前页面；next('/')表示跳转到其他地址。

演示全局导航守卫的使用

使用全局导航守卫实现当进入MovieDetails组件时，判断当前用户是否登录，如果没有登录则跳转到登录页面，如果已登录则跳转到电影详情页面。

新建src\components\Login.vue文件，实现登录页面内容。

<template>
  <div class="login-container">
    登录页面
  </div>
</template>

在src\router.js文件的routes中添加路由匹配规则，通过name属性定义Login组件路由规则的名称。

{ path: '/login', name: 'Login', component: () => import ('./components/Login.vue') }

在src\router.js文件中，在最后一行代码“export default router”的上一行位置注册全局导航守卫。

router.beforeEach((to, from, next) => {
  let isLogin = false
  if (to.name == 'MovieDetails') {
    if (isLogin) { next()
    } else {
      next({ name: 'Login' })
    }
  } else { next() }
})

在浏览器中访问http://127.0.0.1:5173/。先切换到首页，然后单击“跳转到MovieDetails组件”链接，会显示登录页面，说明全局导航守卫拦截成功，如下图所示。

2. 导航独享守卫

目前只有beforeEnter()守卫，只有在路由导航到一个不同的页面时才会被触发， beforeEnter()守卫只适用于单个路由。

3. 组件导航守卫

包括beforeRouteEnter()、beforeRouteUpdate()、beforeRouteLeave()3个守卫，分别表示在路由进入之前被触发、在路由更新之前被触发、在路由离开之前被触发。

A- 组合式写法

B- 选项式写法