基于Vue2.X的路由和钩子函数详解


Posted in Javascript onFebruary 09, 2018

最近上班有些忙,好久没有更新文章,也没学习新的东西。

今天来说说这个路由钩子吧。

导航和钩子函数:

导航:路由正在发生改变 关键字:路由 变

钩子函数:在路由切换的不同阶段调用不同的节点函数(钩子函数在我看来也就是:某个节点和时机触发的函数)。

钩子函数 主要用来拦截导航,让它完成跳转或取消,在导航的不同阶段来执行不同的函数 ,最后钩子函数的执行结果会告诉导航怎么做。。

导航在所有钩子 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 相关文章推荐
arguments对象
Nov 20 Javascript
javascript 多级checkbox选择效果
Aug 20 Javascript
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
Jan 22 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
Dec 28 Javascript
JavaScript判断是否为数字的4种方法及效率比较
Apr 01 Javascript
jQuery时间轴插件使用详解
Jul 16 Javascript
jQuery.prop() 使用详解
Jul 19 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
Mar 06 Javascript
node跨域转发 express+http-proxy-middleware的使用
May 31 Javascript
vue移动端轻量级的轮播组件实现代码
Jul 12 Javascript
使用layui前端框架弹出form表单以及提交的示例
Oct 25 Javascript
Servlet返回的数据js解析2种方法
Dec 12 Javascript
Vuejs 单文件组件实例详解
Feb 09 #Javascript
vue-lazyload图片延迟加载插件的实例讲解
Feb 09 #Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
Feb 09 #Javascript
在Vue中使用highCharts绘制3d饼图的方法
Feb 08 #Javascript
vue中使用ueditor富文本编辑器
Feb 08 #Javascript
React Native自定义控件底部抽屉菜单的示例
Feb 08 #Javascript
vue 使用ref 让父组件调用子组件的方法
Feb 08 #Javascript
You might like
基于php split()函数的用法详解
2013/06/05 PHP
限制ckeditor上传图片文件大小的方法
2013/11/15 PHP
PHP rsa加密解密使用方法
2015/04/27 PHP
PHP验证码类ValidateCode解析
2017/01/07 PHP
jQuery 使用个人心得
2009/02/26 Javascript
JavaScript 三种创建对象的方法
2009/10/16 Javascript
javascript字符串拼接的效率问题
2010/12/25 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
2013/06/26 Javascript
JSON传递bool类型数据的处理方式介绍
2013/09/18 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
2014/11/26 Javascript
jQuery Easyui实现左右布局
2016/01/26 Javascript
jQuery中的基本选择器用法学习教程
2016/04/14 Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
2016/04/16 Javascript
jQuery快速高效制作网页交互特效
2017/02/24 Javascript
node-sass安装失败的原因与解决方法
2017/09/04 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
2018/05/23 Javascript
vue动态路由配置及路由传参的方式
2018/05/23 Javascript
详解vue项目中调用百度地图API使用方法
2019/04/25 Javascript
JavaScript Canvas编写炫彩的网页时钟
2019/10/16 Javascript
jQuery实现手风琴效果(蒙版)
2020/01/11 jQuery
vue随机验证码组件的封装实现
2020/02/19 Javascript
jQuery实现B2B网站后台管理系统侧导航
2020/07/08 jQuery
python自动化工具日志查询分析脚本代码实现
2013/11/26 Python
运行django项目指定IP和端口的方法
2018/05/14 Python
浅谈Python traceback的优雅处理
2018/08/31 Python
我喜欢你 抖音表白程序python版
2019/04/07 Python
pytorch模型存储的2种实现方法
2020/02/14 Python
HTML5实现签到 功能
2018/10/09 HTML / CSS
GUESS西班牙官方网上商城:美国服饰品牌
2017/03/15 全球购物
Wojas罗马尼亚网站:波兰皮鞋品牌
2018/11/01 全球购物
大学生收银员求职信分享
2014/01/02 职场文书
大学生学生会工作总结2015
2015/05/26 职场文书
判断Python中的Nonetype类型
2021/05/25 Python
Python常用配置文件ini、json、yaml读写总结
2021/07/09 Python
css3带你实现3D转换效果
2022/02/24 HTML / CSS
Java 多线程并发FutureTask
2022/06/28 Java/Android