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

导航和钩子函数:

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

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

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

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


先说这个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)来替代

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • VUE Vue :数据驱动的M V Vm框架 m :model(后台提供数据),v :view(页面),vM(模板...
    wudongyu阅读 5,448评论 0 11
  • 回忆: 我们知道,h5的history或者hash帮助我们解决了,变化url跳转页面不发送请求,并且我们能监听到u...
    LoveBugs_King阅读 3,713评论 0 5
  • 导航守卫 导航守卫主要用来通过跳转或取消的方式守卫导航。 参数或查询的改变并不会触发进入/离开的导航守卫。 1、全...
    SailingBytes阅读 1,196评论 1 3
  • 前言 vue-router是什么:是vue.js官方的路由管理器和vue.js的核心深度的集成,让开发者更加简单的...
    GUAN_one阅读 3,789评论 0 2
  • 学习目的 学习Vue的必备技能,必须 熟练使用 Vue-router,能够在实际项目中运用。 Vue-rout...
    _1633_阅读 92,532评论 3 58