Vue路由守卫(导航守卫)及使用场景
目录
前言
一、路由守卫是什么?
二、路由守卫全解析
先来看一下钩子函数执行后输出的顺序吧
1.全局路由守卫
2.组件路由守卫
3.路由独享守卫
单独介绍一下路由守卫钩子三个参数
前言
最近在学习vue路由守卫,感觉路由守卫这里知识点挺多的,来做个小笔记。
一、路由守卫是什么?
路由守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的。
可以简单的理解为一座房子的门口的保安,想要进入这个房子就必须通过保安的检查,要告诉路由守卫你从哪里来?总不能随便陌生人就给放进去?要到哪里去?然后保安再告诉你下一步该怎么做?如果你的确是这个房子主人允许进入的人,那就让你进入,否则就要打电话给房子主人,跟房主商量(登录注册),给你权限。
二、路由守卫全解析
先来看一下钩子函数执行后输出的顺序吧
导航守卫分为:全局的、单个路由独享的、组件内的三种。分别来看一下:
1.全局路由守卫
所谓全局路由守卫,就是小区大门,整个小区就这一个大门,你想要进入其中任何一个房子,都需要经过这个大门的检查
全局路由守卫有个两个:一个是全局前置守卫,一个是全局后置守卫 ,钩子函数按执行顺序包括beforeEach、beforeResolve、afterEach三个。
router.beforeEach((to, from, next) => {console.log(to) => // 到哪个页面去?console.log(from) => // 从哪个页面来?next() => // 一个回调函数
}
router.afterEach(to,from) = {}
[beforeEach]:在路由跳转前触发,参数包括to,from,next(参数会单独介绍)3个,这个钩子作用主要是用于登录验证,就是路由还没跳转前告知,跳转后再通知就晚了。
[beforeResolve]:在组件被解析后,这个钩子函数和beforeEach类似,也是路由跳转前触发,参数也是to,from,next三个。
[afterEach]:和beforeEach相反,它是在路由跳转完成后触发,参数包括to,from没有next,它发生在beforeEach和beforeResolve之后,beforeRouteEnter之前。
2.组件路由守卫
组件路由守卫就是在组件内执行的钩子函数,类似于组件内的生命周期钩子函数按执行顺序为beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave三个。
beforeRouteEnter (to, from, next) {// 注意,在路由进入之前,组件实例还未渲染,所以无法获取this实例,只能通过vm来访问组件实例next(vm => {})
}
beforeRouteUpdate (to, from, next) {// 同一页面,刷新不同数据时调用,
}
beforeRouteLeave (to, from, next) {// 离开当前路由页面时调用
}
[beforeRouteEnter]:路由进入之前调用,参数包括to,from,next。该钩子函数在全局守卫beforeEach和独享守卫beforeEnter之后,全局beforeResolve和全局afterEach之前调用。
[beforeRouteUpdate] :在当前路由改变时,并且该组件被复用时调用,可以通过this访问实例。参数包括to,from,next。当前路由query变更时,该守卫会被调用
[beforeRouteLeave]:导航离开该组件的对应路由时调用,可以访问组件实例this
,参数包括to,from,next。
3.路由独享守卫
目前它只有一个钩子函数beforeEnter
export default new VueRouter({routes: [{path: '/',name: 'home',component: 'Home',beforeEnter: (to, from, next) => {// ...}}]
})
[beforeEnter]:和beforeEach完全相同,如果都设置则在beforeEach之后紧随执行,参数to、from、next
单独介绍一下路由守卫钩子三个参数
to:目标路由对象;
from:即将要离开的路由对象;
next:它是最重要的一个参数,调用该方法后,才能进入下一个钩子函数。
next()//直接进to 所指路由
next(false) //中断当前路由
next('route') //跳转指定路由
next('error') //跳转错误路由
Vue路由守卫(导航守卫)及使用场景相关推荐
- vue axios跨域请求_axios的请求拦截和vue路由的导航守卫有什么区别
在Vue项目中,有两种用户登录状态判断并处理的情况,分别为:导航守卫和axios拦截器. 1. 导航守卫:拦截组件 导航守卫就是我们进行某些页面的时候需要判断当前用户是否登录过,如果登陆过,则可以跳转 ...
- 路由的导航守卫过渡动效transtion导航守卫 路由懒加载 路由元信息 @stage3---wee2--day7
# 路由的导航守卫 别名: 导航守卫 路由守卫 路由钩子 路由拦截 作用: - 类似 [保安] 守卫路由 进 举例: 携带数据进 出 举例: 事情完成才能出 导航守卫一共有三种形式 [ 项目三选一 ] ...
- vue中的路由守卫(导航守卫)
在项目开发中每一次路由的切换或者页面的刷新都需要判断用户是否已经登录,前端可以判断,后端也会进行判断的,我们前端最好也进行判断. vue-router提供了导航钩子:全局前置导航钩子 beforeEa ...
- 2022-11-15 vue笔记-路由vue-router(四) 路由守卫(又称路由拦截,导航守卫)的定义以及示例
文章目录 0.路由的概念 1.路由守卫的定义 定义 官方解释 路由守卫的分类 钩子函数 2.路由守卫的使用场景 3.语法:`router.beforeEach((to,from,next) => ...
- 路由导航守卫/路由拦截/导航守卫
导航守卫: 又称:路由导航守卫.路由拦截都是一样的 分为全局守卫.组件守卫.独享守卫 全局守卫 写在路由页面,写在const router同级之下 const router = new VueRout ...
- vue 路由独享守卫
想进到'trade'页面 必须从shopcart进来 否则进不去 beforeEnter:(to,from,next)=> {if(from.path == '/shopcart'){next( ...
- Vue 路由懒加载导航守卫keep-alive
懒加载组件导入方式 const Foo = () => import('./Foo.vue') const router = new VueRouter({routes: [{ path: '/ ...
- vue-router进阶:路由使用归纳、路由导航守卫、导航守卫解析流程、
一.定义和理解 导航守卫的作用:vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航. >>项目中应用场景举例:路由页面跳转时候进行登陆验证:路由跳转判断: 有多种机会 ...
- vue中的组件导航守卫,个人理解
vue中组件导航守卫 beforeRouteEnter beforeRouteUpdate (2.2 新增) beforeRouteLeave 今天有遇到一个问题,就是在一个页面 新增模块按钮 和 编 ...
- react实现路由跳转拦截功能(导航守卫)
react实现路由跳转拦截功能(导航守卫) 背景 方法1:通过Prompt组件实现react路由跳转拦截功能 Prompt组件介绍 Prompt组件示例 自定义Prompt组件的提示弹窗 方法2:通过 ...
最新文章
- ajax mysql项目 react_React16时代,该用什么姿势写 React ?
- Java还能热多久?学Java有前途吗?
- boost::sort模块实现弦平面稳定测试
- TensorRT(2)-基本使用:mnist手写体识别
- 矩阵低秩张量分解_TKDE 2020 | CTRR:组稀疏约束的紧凑张量环回归
- 有这些好习惯,可以让你悄悄变优秀
- Python入门-traceback
- Fantastical 2如何编辑事件?
- java基础篇(二) ----- java面向对象的三大特性之继承
- 笨办法学Python习题11 提问
- 如何使用 VNC 远程访问树莓派
- 采样频率、采样点数、频率分辨率
- ai的布尔运算在哪_在AI中如何进行布尔运算
- 在OpenCV中使用色彩校正
- kkFileView集成LibreOffice,解决部分文档预览500
- Python实现流星雨效果的代码
- 怎么把一个网址链接转换成文字的形式, 就是点一下那段文字就进入该网站
- Credit Card Fraud Detection(信用卡诈欺侦测)Spark建模
- linux 9 aml 设置wifi,aml常用命令
- 8051单片机c语言编程模板,完美的8051单片机C语言编程模板.doc