基于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 相关文章推荐
excel操作之Add Data to a Spreadsheet Cell
Jun 12 Javascript
jQuery 选择器理解
Mar 16 Javascript
将页面table内容与样式另存成excel文件的方法
Aug 05 Javascript
jquery siblings获取同辈元素用法实例分析
Jul 25 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
Feb 09 Javascript
JavaScript轮播图简单制作方法
Feb 20 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
May 11 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
Nov 11 Javascript
使用layer.msg 时间设置不起作用的解决方法
Sep 12 Javascript
Vue实现点击按钮复制文本内容的例子
Nov 09 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
Nov 13 Javascript
JavaScript实现通讯录功能
Dec 27 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实现批量修改文件后缀名的方法
2015/07/30 PHP
网页设计常用的一些技巧
2006/12/22 Javascript
jquery如何获取复选框的值
2013/12/12 Javascript
B/S模式项目中常用的javascript汇总
2013/12/17 Javascript
JavaScript中的Object对象学习教程
2016/05/20 Javascript
微信小程序  modal弹框组件详解
2016/10/27 Javascript
Nodejs中解决cluster模块的多进程如何共享数据问题
2016/11/10 NodeJs
简单理解js的prototype属性及使用
2016/12/07 Javascript
详解Angular.js指令中scope类型的几种特殊情况
2017/02/21 Javascript
从0到1构建vueSSR项目之路由的构建
2019/03/07 Javascript
jquery实现Ajax请求的几种常见方式总结
2019/05/28 jQuery
vue瀑布流组件实现上拉加载更多
2020/03/10 Javascript
详解Node.js使用token进行认证的简单示例
2020/05/25 Javascript
antd Select下拉菜单动态添加option里的内容操作
2020/11/02 Javascript
python实现搜索指定目录下文件及文件内搜索指定关键词的方法
2015/06/28 Python
浅谈Python里面小数点精度的控制
2018/07/16 Python
django获取from表单multiple-select的value和id的方法
2019/07/19 Python
Python爬虫使用代理IP的实现
2019/10/27 Python
python GUI库图形界面开发之PyQt5图片显示控件QPixmap详细使用方法与实例
2020/02/27 Python
django 链接多个数据库 并使用原生sql实现
2020/03/28 Python
详解vscode实现远程linux服务器上Python开发
2020/11/10 Python
css3圆角边框和边框阴影示例
2014/05/05 HTML / CSS
canvas 实现 github404动态效果的示例代码
2017/11/15 HTML / CSS
法国包包和行李箱销售网站:Bagage24.fr
2020/03/24 全球购物
Linux的文件类型
2012/03/07 面试题
论文评语大全
2014/04/29 职场文书
施工安全生产承诺书
2014/05/23 职场文书
政治学专业毕业生求职信
2014/08/11 职场文书
2014年小学重阳节活动策划方案
2014/09/16 职场文书
大学生国家助学金感谢信
2015/01/23 职场文书
迟到检讨书范文
2015/01/27 职场文书
2015年乡镇人大工作总结
2015/04/22 职场文书
修辞手法有哪些?
2019/08/29 职场文书
导游词之重庆钓鱼城
2019/09/19 职场文书
导游词之麻姑仙境
2019/11/18 职场文书
使用HBuilder制作一个简单的HTML5网页
2022/07/07 HTML / CSS