Vuerouter的beforeEach与afterEach钩子函数的区别


Posted in Javascript onDecember 26, 2018

在路由跳转的时候,我们需要一些权限判断或者其他操作。这个时候就需要使用路由的钩子函数。

定义:路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数。

总体来讲vue里面提供了三大类钩子,两种函数
1、全局钩子
2、某个路由的钩子
3、组件内钩子

两种函数:

1、Vue.beforeEach(function(to,form,next){}) /*在跳转之前执行*/

2.Vue.afterEach(function(to,form))/*在跳转之后判断*/

全局钩子函数

顾名思义,它是对全局有效的一个函数

router.beforeEach((to, from, next) => {

  let token = router.app.$storage.fetch("token");

  let needAuth = to.matched.some(item => item.meta.login);

  if(!token && needAuth) return next({path: "/login"});

  next();

});

beforeEach函数有三个参数:

  • to:router即将进入的路由对象
  • from:当前导航即将离开的路由
  • next:Function,进行管道中的一个钩子,如果执行完了,则导航的状态就是 confirmed (确认的);否则为false,终止导航。

afterEach函数不用传next()函数

某个路由的钩子函数

顾名思义,它是写在某个路由里头的函数,本质上跟组件内函数没有区别。

const router = new VueRouter({
 routes: [
  {
   path: '/login',
   component: Login,
   beforeEnter: (to, from, next) => {
    // ...
   },
   beforeLeave: (to, from, next) => {
    // ...
   }
  }
 ]
})

路由组件的钩子

注意:这里说的是路由组件!

路由组件 属于 组件,但组件 不等同于 路由组件!所谓的路由组件:直接定义在router中component处的组件。如:

var routes = [
  {
  path:'/home',
  component:home,
  name:"home"
  }
]

在子组件中调用路由的钩子函数时无效的。

在官方文档上是这样定义的:

可以在路由组件内直接定义以下路由导航钩子

  • beforeRouteEnter
  • beforeRouteUpdate (2.2 新增)
  • beforeRouteLeave

这里简单说下钩子函数的用法:它是和data,methods平级的。

beforeRouteLeave(to, from, next) {
  next()
},
beforeRouteEnter(to, from, next) {
  next()
},
beforeRouteUpdate(to, from, next) {
  next()
},
data:{},
method: {}

PS:在使用vue-router beforeEach钩子时,你也许会遇到如下问题:

源码:

router.beforeEach((to, from, next) => {
//判断登录状态简单实例
var userInfo = window.localStorage.getItem('token');
if (userInfo) {
next();
} else {
next('/login');
}
})

然后你会发现出现如下错误:出现dead loop错误

Vuerouter的beforeEach与afterEach钩子函数的区别

解决方案:

router.beforeEach((to, from, next) => {
var userInfo = window.localStorage.getItem('token');//获取浏览器缓存的用户信息
if(userInfo){ //如果有就直接到首页咯
next();
} else {
if(to.path=='/login'){ //如果是登录页面路径,就直接next()
next();
} else { //不然就跳转到登录;
next('/login');
}

}
})

解决思路:

排除此时地址 = 转向的地址 的情况,避免dead loop, 问题很简单,但一不小心就入坑了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery select标签操作代码段
May 16 Javascript
js获取html参数及向swf传递参数应用介绍
Feb 18 Javascript
高效率JavaScript编写技巧整理
Aug 23 Javascript
Json和Jsonp理论实例代码详解
Nov 15 Javascript
JS+CSS简单树形菜单实现方法
Sep 12 Javascript
JavaScript实现九九乘法表的简单实例
Jun 07 Javascript
JS设置手机验证码60s等待实现代码
Jun 14 Javascript
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
AnglarJs中的上拉加载实现代码
Feb 08 Javascript
微信小程序实现省市区三级地址选择
Jun 21 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
Sep 09 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
Nov 24 Javascript
使用Sonarqube扫描Javascript代码的示例
Dec 26 #Javascript
angular6的table组件开发的实现示例
Dec 26 #Javascript
详解VUE里子组件如何获取父组件动态变化的值
Dec 26 #Javascript
JavaScript基础之静态方法和实例方法分析
Dec 26 #Javascript
微信小程序实现文字跑马灯
May 26 #Javascript
基于JavaScript canvas绘制贝塞尔曲线
Dec 25 #Javascript
基于js Canvas实现二次贝塞尔曲线
Dec 25 #Javascript
You might like
php文件怎么打开 如何执行php文件
2011/12/21 PHP
PHP取余函数介绍MOD(x,y)与x%y
2014/05/15 PHP
详解PHP错误日志的获取方法
2015/07/20 PHP
Yii框架实现对数据库的CURD操作示例
2019/09/03 PHP
PHP使用redis位图bitMap 实现签到功能
2019/10/08 PHP
PHP中echo与print区别点整理
2021/03/09 PHP
javascript工具库代码
2012/03/29 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
2014/10/30 Javascript
jQuery+HTML5美女瀑布流布局实现方法
2015/09/21 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
2015/12/03 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
2016/02/21 Javascript
javascript实现数字倒计时特效
2016/03/30 Javascript
JavaScript代码性能优化总结篇
2016/05/15 Javascript
js图片放大镜效果实现方法详解
2020/10/28 Javascript
React-native桥接Android原生开发详解
2018/01/17 Javascript
vue如何判断dom的class
2018/04/26 Javascript
js实现鼠标单击Tab表单切换效果
2018/05/16 Javascript
微信公众号H5支付接口调用方法
2019/01/10 Javascript
学习RxJS之JavaScript框架Cycle.js
2019/06/17 Javascript
Echarts实现多条折线可拖拽效果
2019/12/19 Javascript
vue3.0实现点击切换验证码(组件)及校验
2020/11/18 Vue.js
NodeJS配置CORS实现过程详解
2020/12/02 NodeJs
浅谈python可视化包Bokeh
2018/02/07 Python
python 识别图片中的文字信息方法
2018/05/10 Python
Windows系统下PhantomJS的安装和基本用法
2018/10/21 Python
Python 实现子类获取父类的类成员方法
2019/01/11 Python
在python shell中运行python文件的实现
2019/12/21 Python
python异步Web框架sanic的实现
2020/04/27 Python
CSS3哪些新特性值得称赞
2016/03/02 HTML / CSS
中国最大的团购网站:聚划算
2016/09/21 全球购物
苏宁红孩子母婴商城:redbaby
2017/02/12 全球购物
迷你唐卡软皮鞋:Minnetonka Moccasin
2018/05/01 全球购物
params有什么用
2016/03/01 面试题
2014年国庆节活动总结
2014/08/26 职场文书
中国文明网向国旗敬礼活动精彩寄语2014
2014/09/27 职场文书
卖车协议书范本4篇
2014/10/01 职场文书