基于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 相关文章推荐
csdn 批量接受好友邀请
Feb 19 Javascript
面向对象设计模式的核心法则
Nov 10 Javascript
jquery实现动态菜单的实例代码
Nov 28 Javascript
js星星评分效果
Jul 24 Javascript
JS获取当前网页大小以及屏幕分辨率等
Sep 05 Javascript
Javascrip实现文字跳动特效
Nov 27 Javascript
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
快速解决Vue项目在IE浏览器中显示空白的问题
Sep 04 Javascript
详解JavaScript作用域和作用域链
Mar 19 Javascript
JavaScript展开操作符(Spread operator)详解
Jul 20 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
Feb 14 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
Jul 22 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使用mkdir创建多级目录入门例子
2014/05/10 PHP
Yii2实现ajax上传图片插件用法
2016/04/28 PHP
js中通过split函数分割字符串成数组小例子
2013/09/21 Javascript
js调试系列 断点与动态调试[基础篇]
2014/06/18 Javascript
基于jQuery实现返回顶部实例代码
2016/01/01 Javascript
javascript cookie的简单应用
2016/02/24 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
2016/05/10 Javascript
JavaScript必知必会(九)function 说起 闭包问题
2016/06/08 Javascript
jQuery拖拽通过八个点改变div大小
2020/11/29 Javascript
详解extract-text-webpack-plugin 的使用及安装
2018/06/12 Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
2018/11/30 Javascript
详解微信小程序网络请求接口封装实例
2019/05/02 Javascript
Vue 3.0 前瞻Vue Function API新特性体验
2019/08/12 Javascript
javascript实现留言板功能
2020/02/08 Javascript
vue如何搭建多页面多系统应用
2020/06/17 Javascript
python获取糗百图片代码实例
2013/12/18 Python
Python中pip安装非PyPI官网第三方库的方法
2015/06/02 Python
Python脚本实现虾米网签到功能
2016/04/12 Python
win7上python2.7连接mysql数据库的方法
2017/01/14 Python
Python生成8位随机字符串的方法分析
2017/12/05 Python
Python图像处理之gif动态图的解析与合成操作详解
2018/12/30 Python
Python面向对象程序设计中类的定义、实例化、封装及私有变量/方法详解
2019/02/28 Python
Python中一般处理中文的几种方法
2019/03/06 Python
在Pandas中处理NaN值的方法
2019/06/25 Python
python快速编写单行注释多行注释的方法
2019/07/31 Python
Python使用tkinter制作在线翻译软件
2021/02/22 Python
Charlotte Tilbury英国官网:英国彩妆品牌
2017/05/26 全球购物
Bugatchi官方网站:男士服装在线
2019/04/10 全球购物
精美的手工家居和生活用品:Nkuku
2019/11/01 全球购物
一些PHP的面试题
2015/05/06 面试题
医学护理毕业生自荐信
2013/11/07 职场文书
房产买卖委托公证书
2014/04/04 职场文书
新课培训心得体会
2014/09/03 职场文书
2019年鼓励无偿献血倡议书
2019/09/17 职场文书
MySQL悲观锁与乐观锁的实现方案
2021/11/02 MySQL
Spring Boot优化后启动速度快到飞起技巧示例
2022/07/23 Java/Android