基于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 相关文章推荐
Javascript学习笔记1 数据类型
Jan 11 Javascript
js克隆对象、数组的常用方法介绍
Sep 26 Javascript
7个jQuery最佳实践
Jan 12 Javascript
深入浅析JavaScript中数据共享和数据传递
Apr 25 Javascript
仿百度换肤功能的简单实例代码
Jul 11 Javascript
浅谈Javascript中的12种DOM节点类型
Aug 19 Javascript
Bootstrap基本组件学习笔记之进度条(15)
Dec 08 Javascript
Vue.js系列之vue-router(上)(3)
Jan 03 Javascript
Angularjs上传文件组件flowjs功能
Aug 07 Javascript
Web技术实现移动监测的介绍
Sep 18 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
Nov 27 Javascript
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
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
关于query Javascript CSS Selector engine
2013/04/12 Javascript
jQuery简单实现上下,左右滑动的方法
2016/06/01 Javascript
AngularJS 作用域详解及示例代码
2016/08/17 Javascript
微信小程序 数据绑定详解及实例
2016/10/25 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
2017/06/03 Javascript
js实现本地图片文件拖拽效果
2017/07/18 Javascript
vue.js使用v-if实现显示与隐藏功能示例
2018/07/06 Javascript
微信小程序实现tab左右切换效果
2020/11/15 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
2019/02/01 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
2019/03/04 Javascript
NodeJs操作MongoDB教程之分页功能以及常见问题
2019/04/09 NodeJs
使用 Jest 和 Supertest 进行接口端点测试实例详解
2020/04/25 Javascript
原生JS实现拖拽功能
2020/12/16 Javascript
[01:14]英雄,所敬略同——2018完美盛典宣传视频
2018/12/05 DOTA
Python实现自动为照片添加日期并分类的方法
2017/09/30 Python
python3爬虫获取html内容及各属性值的方法
2018/12/17 Python
Win10 安装PyCharm2019.1.1(图文教程)
2019/09/29 Python
numpy 声明空数组详解
2019/12/05 Python
python 5个顶级异步框架推荐
2020/09/09 Python
CSS3转换功能transform主要属性值分析及实现分享
2012/05/06 HTML / CSS
h5封装下拉刷新
2020/08/25 HTML / CSS
美国大城市最热门旅游景点门票:CityPASS
2016/12/16 全球购物
澳大利亚男士西服品牌:M.J.Bale
2018/02/06 全球购物
艺术应用与设计个人的自我评价
2013/11/23 职场文书
银行见习期自我鉴定
2014/01/29 职场文书
中文专业学生自我评价范文
2014/02/06 职场文书
英文推荐信格式范文
2014/05/09 职场文书
客运企业隐患排查工作方案
2014/06/06 职场文书
教师优秀党员事迹材料
2014/08/14 职场文书
学生意外伤害赔偿协议书
2014/09/17 职场文书
党的群众路线整改落实情况汇报
2014/10/28 职场文书
故意伤害人身损害赔偿协议书
2014/11/19 职场文书
主持人大赛开场白
2015/05/29 职场文书
2016五一劳动节慰问信
2015/11/30 职场文书
php字符串倒叙
2021/04/01 PHP
解决vue中provide inject的响应式监听
2022/04/19 Vue.js