vue的路由导航守卫/拦截

最新推荐文章于 2024-07-28 10:00:00 发布

崽崽彤

最新推荐文章于 2024-07-28 10:00:00 发布

阅读量835

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/ruotong0418/article/details/122211263

版权

本文介绍了Vue的路由导航守卫，包括全局守卫、组件级守卫和单个独享守卫。全局守卫包含beforeEach和afterEach，用于在所有路由切换时触发。组件级守卫涉及beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave，分别在进入、更新和离开组件时执行。单个独享守卫如beforeEnter则用于特定路由。

摘要由CSDN通过智能技术生成

路由守卫分为哪几种？

全局守卫，组件级守卫，单个独享守卫

全局守卫

是指路由实例上直接操作的钩子函数，特点是所有路由配置的组件都会触发，直白点就是触发路由就会触发这些钩子函数

全局守卫又分为全局前置守卫（router.beforeEach）和全局后置钩子（router.afterEach）,还有一个router.beforeReslove(2.5.0+) — 在beforeRouteEnter调用之后调用

全局前置守卫（router.beforeEach）

在router下面的jindex.js下面写：
router.beforeEach((to,from,next) => {
	to: 即将要进入的路由对象
	from: 即将要离开的路由对象，
	next(): 这个参数是个函数，且必须调用，否则不能进入路由（空白页面）
			next(): 进入该路由
			next(false)：取消进入路由，url地址重置为from路由地址(也就是将要离开的路由地址)
			next：跳转新路由，当前的导航被中断，重新开始一个新的导航
})

打印结果如下：

在这里插入图片描述