基于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 相关文章推荐
表单的一些基本用法与技巧
Jul 15 Javascript
JavaScript中创建类/对象的几种方法总结
Nov 29 Javascript
动态添加option及createElement使用示例
Jan 26 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
Jan 18 Javascript
JS动态改变浏览器标题的方法
Apr 06 Javascript
vue时间格式化实例代码
Jun 13 Javascript
Vue中render方法的使用详解
Jan 26 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
Sep 14 Javascript
简单的React SSR服务器渲染实现
Dec 11 Javascript
在vue中利用v-html按分号将文本换行的例子
Nov 14 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
Apr 25 Javascript
vue 如何从单页应用改造成多页应用
Oct 23 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
文件上传的实现
2006/10/09 PHP
PHP ajax 异步执行不等待执行结果的处理方法
2015/05/27 PHP
PHP设计模式(四)原型模式Prototype实例详解【创建型】
2020/05/02 PHP
文字幻灯片
2006/06/26 Javascript
为数据添加append,remove功能
2006/10/03 Javascript
写js时遇到的一些小问题
2010/12/06 Javascript
javascript获取隐藏dom的宽高 具体实现
2013/07/14 Javascript
JS 删除字符串最后一个字符的实现代码
2014/02/20 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
2014/06/20 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
2014/09/01 Javascript
JavaScript中使用Callback控制流程介绍
2015/03/16 Javascript
极易被忽视的javascript面试题七问七答
2016/02/15 Javascript
详解Node.js模块间共享数据库连接的方法
2016/05/24 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
详解vue+vueRouter+webpack的简单实例
2017/06/17 Javascript
Node.js成为Web应用开发最佳选择的原因
2018/02/05 Javascript
vue.js使用v-if实现显示与隐藏功能示例
2018/07/06 Javascript
利用vue.js把静态json绑定bootstrap的table方法
2018/08/28 Javascript
electron中使用bootstrap的示例代码
2018/11/06 Javascript
微信小程序云开发(数据库)详解
2019/05/17 Javascript
js实现超级玛丽小游戏
2020/03/18 Javascript
JavaScript 类的封装操作示例详解
2020/05/16 Javascript
[48:29]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS KG
2018/03/31 DOTA
Python3.5编程实现修改IIS WEB.CONFIG的方法示例
2017/08/18 Python
python中单下划线_的常见用法总结
2018/07/10 Python
Python 编程速成(推荐)
2019/04/15 Python
Django时区详解
2019/07/24 Python
python入门之基础语法学习笔记
2020/02/08 Python
施华洛世奇匈牙利官网:SWAROVSKI匈牙利
2019/07/06 全球购物
法人委托书范本
2014/04/04 职场文书
2014年学前班工作总结
2014/12/08 职场文书
2015年预算员工作总结
2015/05/14 职场文书
小人国观后感
2015/06/11 职场文书
新人入职感言
2015/07/31 职场文书
三八节祝酒词
2015/08/11 职场文书
react中的DOM操作实现
2021/06/30 Javascript