vue router.beforeEach(({meta, path}, from, next)与router.afterEach((to, from)

转载 2018年04月15日 16:32:28

导航和钩子函数:

导航:路由正在发生改变   关键字:路由  变

钩子函数:在路由切换的不同阶段调用不同的节点函数(钩子函数在我看来也就是:某个节点和时机触发的函数)。

钩子函数   主要用来拦截导航,让它完成跳转或取消,在导航的不同阶段来执行不同的函数 ,最后钩子函数的执行结果会告诉导航怎么做。。

导航在所有钩子 resolve 完之前一直处于 等待中,等待钩子函数告诉它下一步该怎么做。用next()来指定。

我来给大家举个登陆的例子吧。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

[javascript] view plain copy
  1. router.beforeEach(({meta, path}, from, next) => {    
  2.   
  3.   const {auth = true} = meta      // meta代表的是to中的meta对象,path代表的是to中的path对象  
  4.   
  5.   var isLogin = Boolean(store.state.user.id)    // true用户已登录, false用户未登录   
  6.     
  7.   if (auth  &&  !isLogin  &&  path !== '/login') {   // auth 代表需要通过用户身份验证,默认为true,代表需要被验证, false为不用检验  
  8.     return next({ path: '/login' })   //  跳转到login页面  
  9.   }  
  10.   
  11.   
  12.   next()   // 进行下一个钩子函数  
  13. })  

先说这个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.0导航钩子beforeEach的使用(参考别人的,很简单)

在store文件router.js里面(黄色,红色部分是重点)import Vue from 'vue' import Router from 'vue-router' //出行问卷调查 import...
  • dadaDaShiXiong
  • dadaDaShiXiong
  • 2018-04-04 09:54:06
  • 43

通俗易懂讲解happens-before原则

在接下来的叙述里我首先会说明happens-before规则是干什么用的,然后用一个简单的小程序说明happens-before规则 一、happens-before规则 我们编写的程序都要经过优化后...
  • u010031673
  • u010031673
  • 2015-09-01 11:50:34
  • 5352

linux ip route 命令详细解释

D.2. ip route Another part of the iproute2 suite of tools for IP management, ip route provides ...
  • scdxmoe
  • scdxmoe
  • 2014-08-18 15:34:08
  • 15199

vue-router 2.0 常用基础知识点之导航钩子

导航钩子 vue-router 提供的导航钩子主要用来拦截导航,让它完成跳转或取消。有多种方式可以在路由导航发生时执行钩子:全局的, 单个路由独享的, 或者组件级的。http://www.jia...
  • sinat_17775997
  • sinat_17775997
  • 2017-04-01 09:30:00
  • 16030

vue-router总结

结合项目中的使用,学习vue-router. https://1657413883.github.io/2017/03/18/vue-router总结/ http://www.tuicool.c...
  • sinat_17775997
  • sinat_17775997
  • 2017-03-19 18:48:46
  • 21142

C语言再学习 -- 段错误(核心已转储)

参看:Linux下的段错误产生的原因及调试方法参看:Linux环境下段错误的产生原因及调试方法小结参看:维基百科--Segmentation fault参看:LINUX内核段错误调试详细指南精品培训P...
  • qq_29350001
  • qq_29350001
  • 2016-12-21 12:22:57
  • 14761

Java集合详解--什么是List

简述上章简单介绍了什么是集合,集合有哪几种种类。 在这章中我们主要介绍Collection的其中一种实现方式,List。 什么是List在上一章,我们已经了解了List主要分为3类,ArrayLi...
  • wz249863091
  • wz249863091
  • 2016-10-19 22:20:47
  • 8186

vue-router使用总结

想自己动手搭建一个 Discuz 论坛?试试腾讯云上实验室吧 https://cloud.tencent.com/developer/labs 原文链接:https://zhuanlan...
  • sinat_17775997
  • sinat_17775997
  • 2017-08-01 09:01:34
  • 3850

FE - 走向Node与Webpack 之路 - 必须知道的 Vue Router !

推荐资料vue-router 2 资料中个别东西不理解的,本文可以找到。(真没有,就评论或私信)1. 安装与配置安装:npm install vue-router -D (-save-dev)配置:为...
  • LABLENET
  • LABLENET
  • 2017-03-07 13:40:45
  • 3099

jsp页面中jstl标签详解 包括< c:choose> <c:when> <c:otherwise>

JSLT标签库,是日常开发经常使用的,也是众多标签中性能最好的。把常用的内容,放在这里备份一份,随用随查。尽量做到不用查,就可以随手就可以写出来。这算是Java程序员的基本功吧,一定要扎实。   ...
  • AlbertFly
  • AlbertFly
  • 2016-04-14 16:44:38
  • 12159
收藏助手
不良信息举报
您举报文章:vue router.beforeEach(({meta, path}, from, next)与router.afterEach((to, from)
举报原因:
原因补充:

(最多只允许输入30个字)