非常实用的vue导航钩子_vue.js_脚本之家

导航钩子

正如其名,vue-router
提供的导航钩子首要用来拦截导航,让它完毕跳转或撤消。有各个格局得以在路由导航产生时实行钩子:全局的,
单个路由独享的, 只怕零器件级的。

全局钩子

非常实用的vue导航钩子_vue.js_脚本之家。你能够运用 router.beforeEach 注册叁个大局的 before 钩子:

const router = new VueRouterrouter.beforeEach => { // ...})

当二个导航触发时,全局的 before
钩子根据创设顺序调用。钩子是异步拆解解析推行,当时导航在享有钩子 resolve
完早先一向处在等候中。

各种钩子方法接纳多少个参数:

to: Route: 即就要步向的目的 路由对象

from: Route: 当前导航正要离开的路由

next: Function: 必定要调用该措施来 resolve 这一个钩子。推行效果信任next 方法的调用参数。

next():
举办政管理道中的下三个钩子。假如一切钩子实施完了,则导航的情景就是confirmed

next: 中断当前的领航。倘使浏览器的 U兰德酷路泽L 改动了,那么 UKoleosL 地址会重新苏醒设置到
from 路由相应之处。

next 可能 next:
跳转到叁个不等的地址。当前的领航被搁浅,然后开展二个新的导航。

保障要调用 next 方法,不然钩子就不会被 resolved。

完全一样可以登记三个大局的 after 钩子,不过它不像 before 钩子那样,after
钩子未有next 方法,无法改变导航:

router.afterEach

您能够在路由布署上直接定义 beforeEnter 钩子:

const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, beforeEnter:  => { // ... } } ]})

那么些钩子与大局 before 钩子的措施参数是一律的。

零构件内的钩

谈到底,你能够行使 beforeRouteEnter 和
beforeRouteLeave,在路由组件内平昔定义路由导航钩子,

const Foo = { template: `...`, beforeRouteEnter  { // 在渲染该组件的对应路由被 confirm 前调用 // 不!能!获取组件实例 `this` // 因为当钩子执行前,组件实例还没被创建 }, beforeRouteLeave  { // 导航离开该组件的对应路由时调用 // 可以访问组件实例 `this` }}

beforeRouteEnter 钩子 不能够 访谈this,因为钩子在导航确认前被调用,由此将要出演的新组件尚未被创制。

然则,你能够由此传二个回调给
next来拜望组件实例。在导航被确认的时候施行回调,况兼把组件实例作为回调方法的参数。

beforeRouteEnter  { next(vm => { // 通过 `vm` 访问组件实例 })}

您能够 在 beforeRouteLeave 中央政府机构接访谈 this。这些 leave
钩子常常用来幸免用户在还没保存修正前猝然离开。能够通过 next 来撤销导航。

在做项指标时候,要求是在关门页面包车型大巴时候给客户弹出二个框,扩大客户停留的年华。
方今看了一下以此钩子,感到很正确。

正文已被整理到了《Vue.js前端组件学习课程》,款待大家学习阅读。

至于vue.js组件的学科,请大家点击专题vue.js组件学习课程进行学习。

以上便是本文的全体内容,希望对咱们的学习抱有助于,也愿意我们多多指教脚本之家。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图