首页> Vue教程

基于Vue2.X的路由和钩子函数详解

withpy 2021-06-29

简介下面小编就为大家分享一篇基于Vue2.X的路由和钩子函数详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

最近上班有些忙,好久没有更新文章,也没学习新的东西。

今天来说说这个路由钩子吧。

导航和钩子函数:

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

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

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

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

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

router.beforeEach(({meta, path}, from, next) => {   
  const {auth = true} = meta  // meta代表的是to中的meta对象,path代表的是to中的path对象 
  var isLogin = Boolean(store.state.user.id) // true用户已登录, false用户未登录  
   
  if (auth && !isLogin && path !== '/login') { // auth 代表需要通过用户身份验证,默认为true,代表需要被验证, false为不用检验 
    return next({ path: '/login' }) // 跳转到login页面 
  } 
  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)来替代

以上这篇基于Vue2.X的路由和钩子函数详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持本站。

相关文章

  • golang 切片截取参数方法详解

    这篇文章主要介绍了golang 切片截取参数方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  • PostgreSQL批量update与oracle差异详解

    这篇文章主要介绍了PostgreSQL批量update与oracle差异,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  • 详解C++ sizeof(上)

    这篇文章主要介绍了C++ sizeof的相关资料,帮助大家更好的理解和学习c++,感兴趣的朋友可以了解下

  • 分析uniapp入门之nvue爬坑记

    uni-app的nvue说白了就是weex的那一套东西,uni-app集成了weex的 SDK,也就实现了App端的原生渲染能力。本文将介绍uniapp遇到的一些坑,分享给大家。

  • python实现提取str字符串/json中多级目录下的某个值

    今天小编就为大家分享一篇python实现提取str字符串/json中多级目录下的某个值,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

  • jquery实现联想词搜索框和搜索结果分页的示例

    今天小编就为大家分享一篇jquery实现联想词搜索框和搜索结果分页的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧