Vue Router 导航守卫

最新推荐文章于 2025-05-04 20:15:37 发布

明月清风徐徐

最新推荐文章于 2025-05-04 20:15:37 发布

阅读量1.4k

点赞数 19

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_40930841/article/details/138394735

本文介绍了VueRouter中的导航守卫，包括全局导航守卫（beforeEach和afterEach）、导航独享守卫(beforeEnter)和组件导航守卫。通过示例展示了如何在路由切换时实现登录验证，确保用户权限管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、什么是导航守卫

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

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

1.1全局导航守卫

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

1.2导航独享守卫

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

1.3组件导航守卫

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

二、导航守卫的语法

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

const router = createRouter()

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

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

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

to：表示目标路由对象；
from：表示当前导航正要离开的路由对象；
next：next为函数，如果不接收next()函数，则默认允许用户访问每一个路由；如果接收了next()函数，则必须调用next()函数，否则不允许用户访问任何一个路由。注意：next()函数具有3种调用方式，分别为next()、next(false)和next('/')，其中，next()表示执行下一个钩子函数；next(false)表示强制停留在当前页面；next('/')表示跳转到其他地址。

三、全局导航守卫的代码演示

本文代码是在Vue Router 编程式导航-CSDN博客的基础上进行修改的。

3.1创建Login.vue登录组件

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

3.2在router.js中定义全局导航守卫

// router.js文件内容如下：
import { createRouter, createWebHashHistory } from "vue-router"
import Movie from "./components/Movie.vue"

// // 创建路由实例对象
const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        { path: '/movie/:id', name:'MovieName' , component: Movie, props: true },
        // 导航守卫-登录组件
        { path: '/login', name: 'Login', component: () => import('./components/Login.vue') }
    ]
})

// 注册全局导航守卫
router.beforeEach((to, from, next) => {
    let isLogin = false // 假设用户没有登录
    if (to.name == 'MovieName') { // 判断用户是否要进入电影详情页
      if (isLogin) { // 如果用户已经登录，则直接进入电影详情页
        next() // 放行
      } else { // 如果用户没有登录
        next({ name: 'Login' }) // 跳转到登录页
      }
    } else { // 如果用户不是要进入电影详情页
      next() // 放行
    }
  })

// 导出路由实例对象
export default router