vue路由守卫以及用法
路由守卫分为三种
1.全局路由守卫
- beforeEach 路由进入之前
const router = new VueRouter({ ... })router.beforeEach((to, from, next) => {// ...
})
- afterEach 路由进入之后
钩子不会接受next函数也不会改变导航本身。它不管你去哪里,也不会拦你
当然你也可以使用to和from对象。
router.afterEach((to, from) => {// ...
})
2.独享守卫
beforeEnter:这个守卫是写在路由里面的,只有进入这个路由时才会调用的,这些守卫与全局前置守卫的方法参数是一样的
const router = new VueRouter({routes: [{path: '/foo',component: Foo,beforeEnter: (to, from, next) => {// ...}}]
})
3.组件内守卫
beforeRouteEnter:路由进去
beforeRouteUpdate:路由更新
beforeRouteLeave:路由离开
这三个守卫是写在组件里,beforeRouteEnter守卫不可以访问this,因为首位在导航确认之前被调用,因此即将登场的新组件还没被创建,不过可以通过传一个回调给next来访问组件实例,在导航被确认的时候执行回调,并且把组件实例作为回调方法的参数,其他两个都可以使用this
const Foo = {template: `...`,beforeRouteEnter (to, from, next) {// 在渲染该组件的对应路由被 confirm 前调用// 不!能!获取组件实例 `this`// 因为当守卫执行前,组件实例还没被创建},beforeRouteUpdate (to, from, next) {// 在当前路由改变,但是该组件被复用时调用// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。// 可以访问组件实例 `this`},beforeRouteLeave (to, from, next) {// 导航离开该组件的对应路由时调用// 可以访问组件实例 `this`}
}
导航守卫流程:
- 导航被触发
- 在失活的组件里调用离开守卫
- 调用全局的beforeEac守卫
- 在重用的组件里调用beforeRouteUpdate守卫
- 在路由里调用beforeEnter
- 解析异步路由组件
- 在被激活的组件里调用beforeRouteEnter
- 调用全局的BeforeResolve守卫
- 导航被确认
- 调用全局的afterEach钩子
- 触发DOM更新
- 用创建好的实例调用beforeRouteEnter守卫中传给next的回调函数
代码实现:
router.beforeEach((to, from, next) => {// to代表将要跳转的路径// from代表从哪个路径跳转而来// next()是一个函数,表示放行,next('/login')表示强制跳转到login页面if(to.path==='/login'){return next()}const Token = window.sessionStorage.getItem('token')if(!Token){return next('/login')}next()})
vue路由守卫以及用法相关推荐
- reactrouter4路由钩子_react router @4 和 vue路由 详解(八)vue路由守卫
13.vue路由守卫 a.beforeEach 全局守卫 (每个路由调用前都会触发,根据from和to来判断是哪个路由触发) const router = new VueRouter({ ... }) ...
- vue路由守卫死循环及next原理解释
在使用vue路由守卫的beforeEach方法时可能会出现无限递归,也就是死循环的问题,根本原因在于next()方法在不合适的地方错误调用所致,先来看一下官方对next()方法的解释: befor ...
- Vue路由守卫(导航守卫)及使用场景
目录 前言 一.路由守卫是什么? 二.路由守卫全解析 先来看一下钩子函数执行后输出的顺序吧 1.全局路由守卫 2.组件路由守卫 3.路由独享守卫 单独介绍一下路由守卫钩子三个参数 前言 最近在学习vu ...
- vue路由守卫中next方法的理解
vue路由守卫中next方法的理解 在网上看到了一篇通俗易懂的文章,此文章出处 在这里我用通俗点的说法解释上next(),next(false),next('/'),next(error),希望通过这 ...
- VUE路由守卫_前端实现权限验证
VUE路由守卫_权限验证 引言: 本文在利用SpringBoot和Vue实现前后端分离一文的基础上追加的路由守卫:未登录时会限制访问某些页面(前台控制),与之前的Shiro不同: 文章目录 VUE路由 ...
- vue路由守卫有哪三种类型
vue中路由守卫一共有三种,分别为:全局路由守卫(全局前置守卫.全局后置守卫),组件内路由守卫,路由独享守卫(是在路由配置页面单独给路由配置的一个守卫). 路由守卫,也可以是路由拦截,我们可以通过路由 ...
- vue路由守卫beforeEach和afterEach
路由守卫 路由前置守卫beforeEach 路由在每次切换之前,都会到用一个函数:beforeEach 举个简单的栗子:如果当前跳转的路由路径是/home或者/about时才能查看页面,否则提示无权限 ...
- VUE 路由守卫 next() / next({ ...to, replace: true }) / next(‘/‘) 说明
最近因为next()遇到了不少问题,在这里记录一下 首先是路由守卫,是不是感觉简简单单 beforeEach((to, from, next) => {to // 要去的路由from // 当前 ...
- Vue路由守卫(导航守卫)
路由守卫包括全局守卫(beforeEach()).路由独享守卫(beforeEnter()).组件内守卫(beforeRouteEnter().beforeRouteLeave()) 1.全局守卫(b ...
- vue路由守卫的使用
使用路由守位我们需要使用vuex来存放全局的用户信息 ①存在全局用户信息 1.首先展示我的项目路径 2.store/index.js文件内容如下: 这里主要是引入一些文件,以及进行挂载 import ...
最新文章
- 我的WCF之旅(7):面向服务架构(SOA)和面向对象编程(OOP)的结合——如何实现Service Contract的继承...
- C#——文件上传(一般处理程序ashx)
- 兼容超大图片的处理_计算机读取超大图像的一些问题简述
- linux apache fcgi,编译安装apache2.2对应的mod_proxy_fcgi.so模块步骤,因为使用apache--phpfpm 需要这个...
- Linux ARM交叉编译工具链制作过程
- python 批量读取xlsx并合并_python合并多个excel表格数据-python如何读取多个excel合并到一个excel中...
- 关于数据预处理的7个重要知识点,全在这儿了!
- Java项目课程01:课程概述
- 计算机组装与维护心得体会作文,《计算机维护与局域网建设》学习心得
- Diagrams for Mac(原生流程图制作工具)
- Namespace名称空间
- 短视频+直播系统源码 短视频直播系统源码
- 2022:中国存储的生死时速
- 前端之品优购项目(一)
- xbox手柄电脑怎么测试软件,win10电脑怎么连接xbox手柄?win10电脑连接xbox手柄的详细步骤...
- matlab画动物轮廓图,MATLAB一维插值的应用实例—画左右手的轮廓图
- 晶振波形不是正弦波_晶振的3种输出波形,你了解吗?
- oracle 取月份的第一天
- soap-ws 获取wsdl中所有方法 (一)
- 少儿编程Scratch学习教程3--帮助中心
热门文章
- bat 脚本(批处理)操作注册表
- 三国英杰之赵云传java7723_幻世三国之赵云传奇
- C/C++ 内存对齐原则及作用
- 基于CIM的智慧城市建设
- 数据结构 Java数据结构 --- 二叉树
- my1.exec()==QDialog::Accepted
- GPS信息中提取经纬度坐标信息
- 第九届蓝桥杯,赛后感!!含泪写完。
- Java获取区间随机数公式
- matlab if函数嵌套函数,Excelif函数嵌套多层使用VLOOKUP函数实现多级条件嵌套搜索方法...