Vue Router 路由生命周期钩子/路由导航守卫

本文主要是介绍Vue Router 路由生命周期钩子/路由导航守卫,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

  • 简介
  • 一、全局钩子
  • 二、路由独享的钩子
  • 三、组件内的钩子
    • Vue 2 (Vue Router 3) 中
    • Vue 3 (Vue Router 4)中
  • 四、执行顺序
  • 五、错误处理
    • Vue Router 4(适用于 Vue 3)中
    • Vue Router 3(适用于 Vue 2)中

简介

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:在路由跳转前触发,常用于判断用户是否登录、是否有权限访问某个页面等。

  • beforeResolve:在路由解析完成后被调用,即在确认要导航的路由与当前的路由不同之后,但在实际的组件渲染之前。这个守卫非常适合用于在导航到新的路由之前预先获取数据或执行其他逻辑,特别是当这些数据需要在组件渲染之前就已经准备好的时候。

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

const router = new VueRouter({ /* ... */ }); router.beforeEach((to, from, next) => {  // 逻辑判断...  next() // 确保要调用 next() 方法,否则路由不会跳转  
})  router.beforeResolve((to, from, next) => {// 假设需要预先获取一些数据,比如用户的权限信息next(); // 确保调用 next() 来继续导航
});router.afterEach((to, from) => {  // 路由跳转后的操作...  
})

二、路由独享的钩子

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

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) 中

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 函数一起使用。

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.xvue-router 4.x
beforeRouteEnteronBeforeRouteEnter
beforeRouteUpdateonBeforeRouteUpdate
beforeRouteLeaveonBeforeRouteLeave

四、执行顺序

  1. 当导航开始时,首先触发全局的 beforeEach 钩子

  2. 如果 beforeEach 钩子中没有取消导航,则继续执行路由独享的 beforeEnter 钩子(如果有定义的话)。

  3. 在路由被确认(即解析完成)之后,但在组件渲染之前,会触发全局的 beforeResolve 钩子

  4. 如果导航继续,并且即将进入的组件有定义组件内的钩子,那么在组件实例创建之前会执行组件内beforeRouteEnter钩子

  5. 路由改变完成,组件渲染之后,触发全局的 afterEach 钩子

  6. 如果组件被复用,例如对于带有动态参数的路由,当参数发生变化时,该组件会被重新渲染。这时会触发组件内beforeRouteUpdate钩子

  7. 如果在导航过程中需要离开当前组件,那么会触发当前组件内的 beforeRouteLeave 钩子

即:

  1. 全局 beforeEach 钩子
  2. 路由独享 beforeEnter 钩子
  3. 全局 beforeResolve 钩子
  4. 组件内beforeRouteEnter钩子
  5. 全局 afterEach 钩子
  6. 组件内beforeRouteUpdate钩子
  7. 组件内的 beforeRouteLeave 钩子

1-5 进入的钩子
6 更新的钩子
7 离开的钩子


五、错误处理

Vue Router 4(适用于 Vue 3)中

可以使用 router.onError 方法来注册一个错误处理回调,用来检测和处理可能发生的错误。这个方法允许你定义一个函数,该函数会在路由导航过程中发生错误时被调用。

onError 并不是一个路由钩子(guard)或生命周期钩子,而是一个错误处理函数,可以注册到 Vue Router 实例上以便在路由导航过程中发生错误时进行处理。

以下是一个简单的示例,展示了如何在 Vue Router 4 中使用 onError 方法:

import { createRouter, createWebHistory } from 'vue-router';  const router = createRouter({  history: createWebHistory(),  routes: [  // 路由配置...  ],  
});  router.onError((error) => {  // 处理路由导航中发生的错误  console.error('路由导航发生错误:', error);  
});  export default router;

.

Vue Router 3(适用于 Vue 2)中

在 Vue Router 3 或更早的版本中,没有直接的 onError 方法,但你可以通过全局的 afterEach 钩子来检测和处理可能发生的错误。

例如,如果某个路由守卫中调用了 next(error),可以在 afterEach 钩子中检测到这个错误并进行处理:

router.afterEach((to, from, failure) => {  if (failure) {  // 处理路由导航中发生的错误  console.error('路由导航发生错误:', failure);  }  
});

afterEach 钩子的第三个参数 failure 在 Vue Router 3.1.0 之后的版本中才被引入,用于传递导航失败时的错误信息。

总的来说,虽然 Vue Router 3 没有直接命名为 onError 的钩子,但可以通过上述方式在路由导航发生错误时进行捕获和处理。

这篇关于Vue Router 路由生命周期钩子/路由导航守卫的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/910724

相关文章

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入,随type属性值的不同,变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签,感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》:本文主要介绍了HTML中img标签的使用,包括src属性(指定图片路径)、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等,详细内容请阅读本文,希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h

CSS3打造的现代交互式登录界面详细实现过程

《CSS3打造的现代交互式登录界面详细实现过程》本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性,感兴趣的朋... 目录1. css3用户登录界面设计概述1.1 用户界面设计的重要性1.2 CSS3的新特性与优势1.

HTML5 中的<button>标签用法和特征

《HTML5中的<button>标签用法和特征》在HTML5中,button标签用于定义一个可点击的按钮,它是创建交互式网页的重要元素之一,本文将深入解析HTML5中的button标签,详细介绍其属... 目录引言<button> 标签的基本用法<button> 标签的属性typevaluedisabled

HTML5实现的移动端购物车自动结算功能示例代码

《HTML5实现的移动端购物车自动结算功能示例代码》本文介绍HTML5实现移动端购物车自动结算,通过WebStorage、事件监听、DOM操作等技术,确保实时更新与数据同步,优化性能及无障碍性,提升用... 目录1. 移动端购物车自动结算概述2. 数据存储与状态保存机制2.1 浏览器端的数据存储方式2.1.

基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

《基于HTML5Canvas实现图片旋转与下载功能(完整代码展示)》本文将深入剖析一段基于HTML5Canvas的代码,该代码实现了图片的旋转(90度和180度)以及旋转后图片的下载... 目录一、引言二、html 结构分析三、css 样式分析四、JavaScript 功能实现一、引言在 Web 开发中,

CSS place-items: center解析与用法详解

《CSSplace-items:center解析与用法详解》place-items:center;是一个强大的CSS简写属性,用于同时控制网格(Grid)和弹性盒(Flexbox)... place-items: center; 是一个强大的 css 简写属性,用于同时控制 网格(Grid) 和 弹性盒(F

CSS实现元素撑满剩余空间的五种方法

《CSS实现元素撑满剩余空间的五种方法》在日常开发中,我们经常需要让某个元素占据容器的剩余空间,本文将介绍5种不同的方法来实现这个需求,并分析各种方法的优缺点,感兴趣的朋友一起看看吧... css实现元素撑满剩余空间的5种方法 在日常开发中,我们经常需要让某个元素占据容器的剩余空间。这是一个常见的布局需求