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游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
Jan 23 Javascript
JS设置获取cookies的方法
Jan 26 Javascript
js判断横竖屏及禁止浏览器滑动条示例
Apr 29 Javascript
Javascript动态创建div的方法
Feb 09 Javascript
Google 地图获取API Key详细教程
Aug 06 Javascript
BootStrap无限级分类(无限极分类封装版)
Aug 26 Javascript
Angular.js中数组操作的方法教程
Jul 31 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
Feb 11 Javascript
webpack4.0打包优化策略整理小结
Mar 30 Javascript
微信小程序http连接访问解决方案的示例
Nov 05 Javascript
微信小程序用canvas画图并分享
Mar 09 Javascript
js实现简易ATM功能
Oct 27 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程序中的常见漏洞进行攻击
2006/10/09 PHP
解决ThinkPHP关闭调试模式时报错的问题汇总
2015/04/22 PHP
DEDECMS首页调用图片集里的多张图片
2015/06/05 PHP
一个简单至极的PHP缓存类代码
2015/10/23 PHP
详解php中serialize()和unserialize()函数
2017/07/08 PHP
javascript new 需不需要继续使用
2009/07/02 Javascript
javascript getElementsByClassName实现代码
2010/10/11 Javascript
jquery 学习之二 属性(类)
2010/11/25 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
2015/02/17 Javascript
浅谈JavaScript事件的属性列表
2015/03/01 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
2015/08/28 Javascript
JavaScript笔记之数据属性和存储器属性
2016/03/31 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
2016/09/05 Javascript
完美的js div拖拽实例代码
2016/09/24 Javascript
JavaScript仿聊天室聊天记录
2016/12/27 Javascript
HTML5 js实现拖拉上传文件功能
2020/11/20 Javascript
Nodejs 发送Post请求功能(发短信验证码例子)
2017/02/09 NodeJs
优雅的elementUI table单元格可编辑实现方法详解
2018/12/23 Javascript
javascript实现倒计时效果
2020/02/17 Javascript
vuex实现购物车功能
2020/06/28 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
2020/11/18 Vue.js
python使用电子邮件模块smtplib的方法
2016/08/28 Python
Python网络编程使用select实现socket全双工异步通信功能示例
2018/04/09 Python
关于Python的一些学习总结
2018/05/25 Python
tensorflow 加载部分变量的实例讲解
2018/07/27 Python
手把手教你用纯css3实现轮播图效果实例
2017/05/04 HTML / CSS
游戏商店:Eneba
2020/04/25 全球购物
得到Class的三个过程是什么
2012/08/10 面试题
什么是servlet链?
2014/07/13 面试题
心得体会开头
2014/01/01 职场文书
大学生求职自我评价
2014/01/16 职场文书
化妆师职业生涯规划书
2014/02/16 职场文书
质量标语大全
2014/06/12 职场文书
乡镇党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
Go语言空白表示符_的实例用法
2021/07/04 Golang