大白话Vue Router 中路由守卫（全局守卫、路由独享守卫、组件内守卫）的种类及应用场景

news2025/3/10 10:32:05

大白话Vue Router 中路由守卫（全局守卫、路由独享守卫、组件内守卫）的种类及应用场景

答题思路

明确要介绍的内容：需要分别介绍 Vue Router 中全局守卫、路由独享守卫和组件内守卫这三种路由守卫的种类，详细说明它们的定义、使用方式以及各自适用的应用场景。
结合代码示例：通过编写带有详细注释的代码示例，更直观地展示每种路由守卫的使用方法，帮助理解。
清晰阐述应用场景：用通俗易懂的语言说明在哪些实际情况下适合使用每种路由守卫。

回答范文

全局守卫

全局守卫是指可以在整个应用中对路由跳转进行统一控制的守卫。Vue Router 提供了两种全局守卫：全局前置守卫和全局后置钩子。

// 引入 Vue 和 Vue Router
import Vue from 'vue'
import VueRouter from 'vue-router'

// 使用 Vue Router 插件
Vue.use(VueRouter)

// 定义路由组件
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }

// 定义路由配置
const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About }
]

// 创建路由实例
const router = new VueRouter({
  routes
})

// 全局前置守卫，在路由跳转前执行
router.beforeEach((to, from, next) => {
  // to 表示要跳转的目标路由对象
  // from 表示当前所在的路由对象
  // next 是一个函数，用于控制路由跳转
  console.log('全局前置守卫：即将从', from.path, '跳转到', to.path)
  
  // 模拟判断用户是否登录
  const isLoggedIn = true
  if (to.path === '/about' && !isLoggedIn) {
    // 如果用户未登录且要跳转到 /about 页面，重定向到 /home 页面
    next('/home')
  } else {
    // 允许路由跳转
    next()
  }
})

// 全局后置钩子，在路由跳转后执行
router.afterEach((to, from) => {
  // 这里不需要调用 next 函数
  console.log('全局后置钩子：已经从', from.path, '跳转到', to.path)
})

// 创建 Vue 实例并挂载路由
new Vue({
  router
}).$mount('#app')

应用场景：

全局前置守卫适合用于进行全局的权限验证，比如检查用户是否登录，只有登录用户才能访问某些页面。还可以用于记录用户的访问日志等。
全局后置钩子适合用于一些页面跳转后的操作，比如修改页面的标题、发送统计信息等。

路由独享守卫

路由独享守卫是指只对某个特定的路由配置生效的守卫。

// 引入 Vue 和 Vue Router
import Vue from 'vue'
import VueRouter from 'vue-router'

// 使用 Vue Router 插件
Vue.use(VueRouter)

// 定义路由组件
const Home = { template: '<div>Home</div>' }
const Special = { template: '<div>Special</div>' }

// 定义路由配置
const routes = [
  { 
    path: '/home', 
    component: Home 
  },
  { 
    path: '/special', 
    component: Special,
    // 路由独享守卫，在进入该路由前执行
    beforeEnter: (to, from, next) => {
      // to 表示要跳转的目标路由对象
      // from 表示当前所在的路由对象
      // next 是一个函数，用于控制路由跳转
      console.log('路由独享守卫：即将从', from.path, '跳转到', to.path)
      
      // 模拟判断是否满足特殊条件
      const hasSpecialPermission = true
      if (!hasSpecialPermission) {
        // 如果不满足特殊条件，重定向到 /home 页面
        next('/home')
      } else {
        // 允许路由跳转
        next()
      }
    }
  }
]

// 创建路由实例
const router = new VueRouter({
  routes
})

// 创建 Vue 实例并挂载路由
new Vue({
  router
}).$mount('#app')

应用场景：路由独享守卫适用于对某个特定路由进行特殊的权限验证或逻辑处理，比如某个页面只有在满足特定条件下才能访问。

组件内守卫

组件内守卫是指定义在组件内部的路由守卫，只对该组件的路由跳转生效。

<template>
  <div>
    <h1>Profile</h1>
  </div>
</template>

<script>
export default {
  // 组件内守卫，在进入该组件的路由前执行
  beforeRouteEnter(to, from, next) {
    // to 表示要跳转的目标路由对象
    // from 表示当前所在的路由对象
    // next 是一个函数，用于控制路由跳转
    console.log('组件内守卫（beforeRouteEnter）：即将从', from.path, '跳转到', to.path)
    
    // 模拟判断用户是否有访问该组件的权限
    const hasAccess = true
    if (!hasAccess) {
      // 如果没有权限，重定向到 /home 页面
      next('/home')
    } else {
      // 允许路由跳转
      next()
    }
  },
  // 组件内守卫，在当前路由改变且该组件被复用时调用
  beforeRouteUpdate(to, from, next) {
    console.log('组件内守卫（beforeRouteUpdate）：即将从', from.path, '跳转到', to.path)
    // 允许路由跳转
    next()
  },
  // 组件内守卫，在离开该组件的路由前执行
  beforeRouteLeave(to, from, next) {
    console.log('组件内守卫（beforeRouteLeave）：即将从', from.path, '跳转到', to.path)
    
    // 模拟确认用户是否要离开该页面
    const confirmLeave = confirm('确定要离开此页面吗？')
    if (confirmLeave) {
      // 允许路由跳转
      next()
    } else {
      // 取消路由跳转
      next(false)
    }
  }
}
</script>

应用场景：