基于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 相关文章推荐
js中的setInterval和setTimeout使用实例
May 09 Javascript
Jquery倒计时源码分享
May 16 Javascript
超级简单的jquery操作表格方法
Dec 15 Javascript
jQuery背景插件backstretch使用指南
Apr 21 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
Apr 11 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
Oct 11 Javascript
Angular.JS中的指令引用template与指令当做属性详解
Mar 30 Javascript
浅谈es6中export和export default的作用及区别
Feb 07 Javascript
你点的 ES6一些小技巧,请查收
Apr 25 Javascript
优雅的在React项目中使用Redux的方法
Nov 10 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
Dec 03 Javascript
electron实现静默打印的示例代码
Aug 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中ADODB类详解
2008/03/25 PHP
php dirname(__FILE__) 获取当前文件的绝对路径
2011/06/28 PHP
php无限分类且支持输出树状图的详细介绍
2013/06/19 PHP
php判断表是否存在的方法
2015/06/18 PHP
javascript学习笔记(六) Date 日期类型
2012/06/19 Javascript
js获取指定日期前后的日期代码
2013/08/20 Javascript
jQuery获得内容和属性方法及示例
2013/12/02 Javascript
jquery解析JSON数据示例代码
2014/03/17 Javascript
jQuery实现tab标签自动切换的方法
2015/02/28 Javascript
JQuery用户名校验的具体实现
2016/03/18 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
2016/12/14 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
2017/03/06 Javascript
Vue的事件响应式进度条组件实例详解
2018/02/04 Javascript
关于Vue在ie10下空白页的debug小结
2018/05/02 Javascript
Vue-component全局注册实例
2018/09/06 Javascript
angular6 填坑之sdk的方法
2018/12/27 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
2019/01/23 Javascript
node.js使用http模块创建服务器和客户端完整示例
2020/02/10 Javascript
jQuery实现简单评论功能
2020/08/19 jQuery
python学习笔记:字典的使用示例详解
2014/06/13 Python
初学Python函数的笔记整理
2015/04/07 Python
Python实现简单生成验证码功能【基于random模块】
2018/02/10 Python
使用Python编写Prometheus监控的方法
2018/10/15 Python
Python 实现文件打包、上传与校验的方法
2019/02/13 Python
python获取微信企业号打卡数据并生成windows计划任务
2019/04/30 Python
使用Python和Prometheus跟踪天气的使用方法
2019/05/06 Python
详解Python3除法之真除法、截断除法和下取整对比
2019/05/23 Python
python属于解释型语言么
2020/06/15 Python
加拿大最大的相机店:Henry’s
2017/05/17 全球购物
连锁经营管理专业大学生求职信
2013/10/30 职场文书
应届生学校辅导员求职信
2013/11/07 职场文书
升旗仪式主持词
2014/03/19 职场文书
市贸粮局召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2016年全国助残日活动总结
2016/04/01 职场文书
详解CSS不定宽溢出文本适配滚动
2021/05/24 HTML / CSS
css常用字体属性与背景属性介绍
2022/02/28 HTML / CSS