基于Vue2.X的路由和钩子函数详解
最近上班有些忙,好久没有更新文章,也没学习新的东西。
今天来说说这个路由钩子吧。
导航和钩子函数:
导航:路由正在发生改变 关键字:路由 变
钩子函数:在路由切换的不同阶段调用不同的节点函数(钩子函数在我看来也就是:某个节点和时机触发的函数)。
钩子函数 主要用来拦截导航,让它完成跳转或取消,在导航的不同阶段来执行不同的函数 ,最后钩子函数的执行结果会告诉导航怎么做。。
导航在所有钩子 resolve 完之前一直处于 等待中,等待钩子函数告诉它下一步该怎么做。用next()来指定。
我来给大家举个登陆的例子
router.beforeEach(({meta, path}, from, next) => { const {auth = true} = meta // meta代表的是to中的meta对象,path代表的是to中的path对象 var isLogin = Boolean(store.state.user.id) // true用户已登录, false用户未登录 if (auth && !isLogin && path !== '/login') { // auth 代表需要通过用户身份验证,默认为true,代表需要被验证, false为不用检验 return next({ path: '/login' }) // 跳转到login页面 } next() // 进行下一个钩子函数 })
先说这个beforeEach的钩子函数,它是一个全局的before 钩子函数, (before each)意思是在 每次每一个路由改变的时候都得执行一遍。
它的三个参数:
to: (Route路由对象) 即将要进入的目标 路由对象 to对象下面的属性: path params query hash fullPath matched name meta(在matched下,但是本例可以直接用)
from: (Route路由对象) 当前导航正要离开的路由
next: (Function函数) 一定要调用该方法来 resolve 这个钩子。 调用方法:next(参数或者空) ***必须调用
next(无参数的时候): 进行管道中的下一个钩子,如果走到最后一个钩子函数,那么 导航的状态就是 confirmed (确认的)
next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。
全局钩子函数之 全局的afterEach钩子:
after 钩子没有 next 方法,不能改变导航,代表已经确定好了导航怎么去执行后,附带的一个执行钩子函数
组件内的钩子函数:( beforeRouteEnter 和 beforeRouteLeave 再加一个 watch函数 )
vue2.X的组件内钩子函数比vue1.X减少了许多。。
使用组件自身的生命周期钩子函数来替代 activate 和 deactivate
在 $router 上使用 watcher 来响应路由改变
canActivate 可以被 router 的配置中的 beforeEnter 中实现
canDeactivate 已经被 beforeRouteLeave 取代, 后者在一个组件的根级定义中指定。这个钩子函数在调用时是将组件的实例作为其上下文的。
canReuse 已经被移除,因其容易混淆且很少被用到。
用ajax获取数据的data(to, from, next) 钩子用组件内 beforeRouteEnter (to, from, next)来替代
以上这篇基于Vue2.X的路由和钩子函数详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
- 数据结构和算法——二叉树
- 【专业技术】谷歌浏览器实现Javascript扩展
- 数据结构和算法——二叉排序树
- 通过shell脚本生成查询表数据的sql (r2笔记63天)
- Linux C 编程——多线程
- 数据结构和算法——Huffman树和Huffman编码
- 简单易学的机器学习算法——K-Means++算法
- 梯度下降原理及Python实现
- 海量数据迁移之通过rowid切分大表(r2笔记62天)
- 简单易学的机器学习算法——K-近邻算法
- 使用Python绘制点击图、热图
- 使用shell生成状态报表(r2笔记61天)
- 利用d3.js对QQ群资料进行大数据可视化分析
- 海量数据迁移之分区并行切分(r2笔记60天)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Phantomjs网页前端自动化测试之利器
- Ansible自动化运维学习笔记3
- Keepalived高可用服务解决方案
- pandas与SQL的查询语句对比
- 使用tensorflow搭建线性回归模型
- Flask-Admin修改成中文显示
- 什么是需求分析呢?
- 使用Pandas处理杂乱数据
- 在flask中使用flask-migrate管理数据库
- 直播视频网站源码,实现移动端的按钮拖动
- 解决k8s集群环境内存不足导致容器被kill问题
- NLP之pyhanlp安装及其使用
- nginx 代理 web socket 报错“WebSocket is already in CLO
- IDEA为每个文件加入姓名,日期,版本号
- nginx 代理 web socket 报错“WebSocket is already in CLO