Vue Router 路由钩子/路由守卫

文章目录

简介

Vue Router 提供了路由钩子(Route Hooks),允许你在路由发生变化时执行一些操作。

这些钩子可以在路由进入、离开等关键时刻触发,从而实现一些特定的功能,比如页面权限控制、数据预加载等。

路由守卫简单来讲就是监听页面进入修改 ,和离开的功能。

每个守卫接受三个参数:

  • to:即将要进入的路由对象
  • from:当前导航正要离开的路由
  • next:一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

关于 next :

  1. next():进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。
  2. next(false):中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。
  3. next('/')next({ path: '/' }):跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。
  4. next(error):(2.4.0+) 如果传入 next 的参数是一个 Error 实例,则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

.

Vue Router 的路由钩子主要分为三类:

  • 全局钩子
  • 路由独享的钩子
  • 组件内的钩子

全局钩子

全局钩子对整个路由实例都有效,它们主要有两个:beforeEachafterEach

  • beforeEach:在路由跳转前触发,常用于判断用户是否登录、是否有权限访问某个页面等。

  • afterEach:在路由跳转后触发,通常用于一些清理工作或者页面跳转后的通知。

js 复制代码
const router = new VueRouter({ /* ... */ }); 
  
router.beforeEach((to, from, next) => {  
  // 逻辑判断...  
  next() // 确保要调用 next() 方法,否则路由不会跳转  
})  
  
router.afterEach((to, from) => {  
  // 路由跳转后的操作...  
})

路由独享的钩子

可以在路由配置中直接定义 beforeEnter 钩子,它只会在进入该路由时触发。

js 复制代码
const router = new VueRouter({  
  routes: [  
    {  
      path: '/foo',  
      component: Foo,  
      beforeEnter: (to, from, next) => {  
        // 逻辑判断...  
        next()  
      }  
    }  
  ]  
})

组件内的钩子

在 Vue 组件中,你可以使用以下路由钩子:beforeRouteEnterbeforeRouteUpdate(2.2+ 新增)、beforeRouteLeave

  • beforeRouteEnter:在路由进入该组件的渲染函数之前调用,此时组件实例尚未创建,因此无法访问 this。可以通过 next 的回调函数来访问组件实例。

  • beforeRouteUpdate :当同一个路由重新渲染时调用,例如,对于带有动态参数的路由 /foo/:id,当 :id 发生变化时,该组件会被重新渲染。

  • beforeRouteLeave:在导航离开该组件的对应路由时调用。

Vue 2 (Vue Router 3) 中

js 复制代码
export default {  
  data() {  
    return {  
      // ...  
    }  
  },  
  beforeRouteEnter(to, from, next) {  
    // 组件尚未创建,无法访问 `this`  
    next(vm => {  
      // 访问组件实例 `vm`  
    })  
  },  
  beforeRouteUpdate(to, from, next) {  
    // 当前路由改变,但组件复用时调用  
    // 例如,对于带查询参数或动态段的路由 `/foo?a=1` 或者 `/foo/1`,  
    // 组件实例会被复用,此时这个钩子会被调用  
    this.someData = 'new data'  
    next()  
  },  
  beforeRouteLeave(to, from, next) {  
    // 导航离开该组件的对应路由时调用  
    // 可以访问组件实例 `this`  
    const answer = window.confirm('你确定要离开吗?')  
    if (answer) {  
      next()  
    } else {  
      next(false) // 取消导航  
    }  
  }  
}

Vue 3 (Vue Router 4)中

组件内钩子的使用方式在 Vue 3 中没有显著变化,但如果你使用 Composition API,你可能会更倾向于使用 onBeforeRouteEnteronBeforeRouteUpdateonBeforeRouteLeave 函数,这些函数可以与 setup 函数一起使用。

js 复制代码
import { onBeforeRouteEnter, onBeforeRouteUpdate, onBeforeRouteLeave } from 'vue-router';  
  
export default {  
  setup() {  
    onBeforeRouteEnter((to, from, next) => {  
      next(vm => {  
        // 访问组件实例  
      });  
    });  
  
    onBeforeRouteUpdate((to, from, next) => {  
      // ...当前路由改变,但组件复用时调用  
      next();  
    });  
  
    onBeforeRouteLeave((to, from, next) => {  
      // ...导航离开该组件的对应路由时调用  
      next();  
    };  
  
    // ...其他 Composition API 逻辑  
  }  
};
vue-router 3.x vue-router 4.x
beforeRouteEnter onBeforeRouteEnter
beforeRouteUpdate onBeforeRouteUpdate
beforeRouteLeave onBeforeRouteLeave
相关推荐
计算机软件程序设计3 分钟前
vue和微信小程序处理markdown格式数据
前端·vue.js·微信小程序
指尖时光.4 分钟前
【前端进阶】01 重识HTML,掌握页面基本结构和加载过程
前端·html
前端御书房7 分钟前
Pinia 3.0 正式发布:全面拥抱 Vue 3 生态,升级指南与实战教程
前端·javascript·vue.js
NoneCoder22 分钟前
JavaScript系列(84)--前端工程化概述
前端·javascript·状态模式
晚安72029 分钟前
idea添加web工程
java·前端·intellij-idea
零凌林2 小时前
vue3中解决组件间 css 层级问题最佳实践(Teleport的使用)
前端·css·vue.js·新特性·vue3.0·teleport
糟糕好吃2 小时前
用二进制思维重构前端权限系统
前端
B站计算机毕业设计超人2 小时前
计算机毕业设计SpringBoot+Vue.jst0甘肃非物质文化网站(源码+LW文档+PPT+讲解)
java·vue.js·spring boot·后端·spring·intellij-idea·课程设计
Ranye1232 小时前
从 JS 到 Dart:语法基础
javascript·flutter·dart