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 相关文章推荐
Javascript操作URL函数修改版
Nov 07 Javascript
原生js实现自由拖拽弹窗代码demo
Jun 29 Javascript
浅谈js常用内置方法和对象
Sep 24 Javascript
zTree树形插件异步加载方法详解
Jun 14 Javascript
详解vue-cli中配置sass
Jun 21 Javascript
js+html5生成自动排列对话框实例
Oct 09 Javascript
input type=file 选择图片并且实现预览效果的实例
Oct 26 Javascript
javaScript产生随机数的用法小结
Apr 21 Javascript
Vue父组件向子组件传值以及data和props的区别详解
Mar 02 Javascript
JS如何寻找数组中心索引过程解析
Jun 01 Javascript
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
输入框跟随文字内容适配宽实现示例
Aug 14 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
复杂检索数据并分页显示的处理方法
2006/10/09 PHP
兼容性最强的PHP生成缩略图的函数代码(修改版)
2011/01/18 PHP
php邮箱地址正则表达式验证
2015/11/13 PHP
PHP Class SoapClient not found解决方法
2018/01/20 PHP
PDO::lastInsertId讲解
2019/01/29 PHP
ThinkPHP5&5.1实现验证码的生成、使用及点击刷新功能示例
2020/02/07 PHP
PHP 实现 WebSocket 协议原理与应用详解
2020/04/22 PHP
屏蔽F1~F12的快捷键的js函数
2010/05/06 Javascript
原生js的弹出层且其内的窗口居中
2014/05/14 Javascript
jQuery 仿百度输入标签插件附效果图
2014/07/04 Javascript
JQuery动画与特效实例分析
2015/02/02 Javascript
Javascript中call,apply,bind方法的详解与总结
2016/12/12 Javascript
js生成随机颜色方法代码分享(三种)
2016/12/29 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
2017/04/03 jQuery
JQuery 获取多个select标签option的text内容(实例)
2017/09/07 jQuery
JS运动改变单物体透明度的方法分析
2018/01/23 Javascript
NodeJs项目中关闭ESLint的方法
2018/08/09 NodeJs
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
2019/01/15 Javascript
Vue Prop属性功能与用法实例详解
2019/02/23 Javascript
typescript nodejs 依赖注入实现方法代码详解
2019/07/21 NodeJs
jquery ajax 请求小技巧实例分析
2019/11/11 jQuery
[10:53]2018DOTA2国际邀请赛寻真——EG
2018/08/11 DOTA
python如何实现远程控制电脑(结合微信)
2015/12/21 Python
Python 多个图同时在不同窗口显示的实现方法
2019/07/07 Python
python flask 如何修改默认端口号的方法步骤
2019/07/12 Python
虚拟机下载python是否需要联网
2020/07/27 Python
夏威夷航空官网:Hawaiian Airlines
2016/09/11 全球购物
公司行政经理岗位职责
2013/12/24 职场文书
寄语是什么意思
2014/04/10 职场文书
团队队名口号大全
2014/06/06 职场文书
党员四风问题对照检查材料思想汇报
2014/09/16 职场文书
党员查摆四风问题思想汇报
2014/10/25 职场文书
2014年小学教学工作总结
2014/11/13 职场文书
酒店圣诞节活动总结
2015/05/06 职场文书
某某幼儿园的教育教学管理调研分析报告
2019/11/29 职场文书
html实现弹窗的实例
2021/06/09 HTML / CSS