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 相关文章推荐
js中的值类型和引用类型小结 文字说明与实例
Dec 12 Javascript
Jquery之Ajax运用 学习运用篇
Sep 26 Javascript
JS实现切换标签页效果实例代码
Nov 01 Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
Sep 12 Javascript
JS跨域解决方案之使用CORS实现跨域
Apr 14 Javascript
怎么引入(调用)一个JS文件
May 26 Javascript
微信小程序  wx.request合法域名配置详解
Nov 23 Javascript
JS中setTimeout和setInterval的最大延时值详解
Feb 13 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
Aug 24 Javascript
JS多个异步请求 按顺序执行next实现解析
Sep 16 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
Sep 27 Javascript
vue elementui tree 任意级别拖拽功能代码
Aug 31 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
实用函数3
2007/11/08 PHP
php FPDF类库应用实现代码
2009/03/20 PHP
php多维数组去掉重复值示例分享
2014/03/02 PHP
php页码形式分页函数支持静态化地址及ajax分页
2014/03/28 PHP
基于Jquery实现表格动态分页实现代码
2011/06/21 Javascript
解决jquery插件冲突的问题
2014/01/23 Javascript
javascript 终止函数执行操作
2014/02/14 Javascript
JavaScript实现点击自动选择TextArea文本的方法
2015/07/02 Javascript
jQuery的实例及必知重要的jQuery选择器详解
2016/05/20 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
2017/03/04 Javascript
vue拖拽组件使用方法详解
2018/12/01 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
2019/03/08 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
2019/06/28 Javascript
layUI实现列表查询功能
2019/07/27 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
2019/11/12 Javascript
python发送HTTP请求的方法小结
2015/07/08 Python
python实现随机调用一个浏览器打开网页
2018/04/21 Python
Python中的groupby分组功能的实例代码
2018/07/11 Python
如何在Django中设置定时任务的方法示例
2019/01/18 Python
python 并发编程 阻塞IO模型原理解析
2019/08/20 Python
利用python、tensorflow、opencv、pyqt5实现人脸实时签到系统
2019/09/25 Python
Python实现微信好友的数据分析
2019/12/16 Python
Python实现图片查找轮廓、多边形拟合、最小外接矩形代码
2020/07/14 Python
Python多分支if语句的使用
2020/09/03 Python
python speech模块的使用方法
2020/09/09 Python
运动会入场解说词
2014/02/07 职场文书
给校长的一封建议书
2014/03/12 职场文书
酒店优秀员工事迹材料
2014/06/02 职场文书
小学国旗下的演讲稿
2014/08/28 职场文书
教师党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2016国培学习心得体会
2016/01/08 职场文书
如何写好开幕词?
2019/06/24 职场文书
python实现黄金分割法的示例代码
2021/04/28 Python
Vue和Flask通信的实现
2021/05/19 Vue.js
python使用PySimpleGUI设置进度条及控件使用
2021/06/10 Python
使用pandas生成/读取csv文件的方法实例
2021/07/09 Python