基于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 相关文章推荐
8个超实用的jQuery功能代码分享
Jan 08 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
Aug 28 Javascript
JavaScript数组的定义及数字操作技巧
Jun 06 Javascript
Node.js包管理器Yarn的入门介绍与安装
Oct 17 Javascript
JavaScript登录验证码的实现
Oct 27 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
Oct 27 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
Feb 11 Javascript
通过npm引用的vue组件使用详解
Mar 02 Javascript
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
May 09 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
Sep 27 Javascript
Javascript查看大图功能代码实现
May 07 Javascript
vue使用echarts图表自适应的几种解决方案
Dec 04 Vue.js
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
php5.4以上版本GBK编码下htmlspecialchars输出为空问题解决方法汇总
2015/04/03 PHP
解决PHPstudy Apache无法启动的问题【亲测有效】
2020/10/30 PHP
JQuery获取文本框中字符长度的代码
2011/09/29 Javascript
公共js在页面底部加载的注意事项介绍
2013/07/18 Javascript
调试代码导致IE出错的避免方法
2014/04/04 Javascript
JS实现点击按钮后框架内载入不同网页的方法
2015/05/05 Javascript
JS模拟键盘打字效果的方法
2015/08/05 Javascript
JS实现队列的先进先出功能示例
2017/05/10 Javascript
vue 组件中添加样式不生效的解决方法
2018/07/06 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
2018/08/30 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
2019/04/26 Javascript
inquirer.js一个用户与命令行交互的工具详解
2019/05/18 Javascript
ionic2.0双击返回键退出应用
2019/09/17 Javascript
详解Python中的多线程编程
2015/04/09 Python
python操作redis的方法
2015/07/07 Python
Linux系统上Nginx+Python的web.py与Django框架环境
2015/12/25 Python
Django视图和URL配置详解
2018/01/31 Python
详谈python中冒号与逗号的区别
2018/04/18 Python
python设定并获取socket超时时间的方法
2019/01/12 Python
详解Python连接MySQL数据库的多种方式
2019/04/16 Python
python调用动态链接库的基本过程详解
2019/06/19 Python
python实现屏保程序(适用于背单词)
2019/07/30 Python
python使用turtle库绘制奥运五环
2020/02/24 Python
Django 设置多环境配置文件载入问题
2020/02/25 Python
仿酷狗html5手机音乐播放器主要部分代码
2013/05/15 HTML / CSS
红色连衣裙精品店:Red Dress Boutique
2018/08/11 全球购物
美体小铺法国官方网站:The Body Shop法国
2020/06/04 全球购物
Linux管理员面试题 Linux admin interview questions
2014/11/01 面试题
自荐书格式
2013/12/01 职场文书
《小熊住山洞》教学反思
2014/02/21 职场文书
校园活动宣传方案
2014/03/28 职场文书
全国文明单位申报材料
2014/05/31 职场文书
医院标语大全
2014/06/23 职场文书
2014年平安夜寄语
2014/12/08 职场文书
创业计划书之校园超市
2019/09/12 职场文书
pycharm无法安装cv2模块问题
2022/05/20 Python