内容简介:可以在路由发生变化时进行一些特殊的处理三类钩子:1、全局钩子
一、路由钩子
可以在路由发生变化时进行一些特殊的处理
三类钩子:
1、全局钩子
2、某个路由独享的钩子
3、组件内钩子
主要都有三个参数:
to: Route: 即将要进入的路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
next(): 进行下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。
next(false): 中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。
next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。
-
全局守卫 使用全局路由钩子,一定要调用next()
import Router from 'vue-router' Vue.use(Router) const router = new Router() router.beforeEach((to,from,next)=>{ ...... next() })
当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于 等待中
-
路由独享的守卫(路由内钩子)在路由配置上直接定义
export default new Router({
routes: [ { path: '/', name: 'home', component: Home, beforeEnter: (to, from, next) => { ... } } ] })
-
组件内的守卫(组件内钩子)
beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave
beforeRouteEnter (to, from, next) { 在渲染该组件的对应路由被 confirm 前调用 不能获取组件实例 this,因为当守卫执行前,组件实例还没被创建 }, beforeRouteUpdate (to, from, next) { 在当前路由改变,但是该组件被复用时调用 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。 可以访问组件实例 this }, beforeRouteLeave (to, from, next) { 导航离开该组件的对应路由时调用 可以访问组件实例 this }
二、实际开发中的应用场景
1、清除当前组件中的定时器,以免占用内存
beforeRouteLeave (to, from, next) { clearInterval(this.timer) next() }
2、当前页面中,有未关闭的窗口,或未保存的内容时,阻止页面跳转
3、当用户关闭页面时, 将公用的信息保存到session或Vuex中
beforeRouteLeave (to, from, next) { localStorage.setItem(name, content next() }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
你也能看得懂的Python算法书
王硕,董文馨,张舒行,张洁 著 / 电子工业出版社 / 2018-11-1 / 59.00
编程的核心是算法,学习算法不仅能教会你解决问题的方法,而且还能为你今后的发展提供一种可能。 《你也能看得懂的Python算法书》面向算法初学者,首先介绍当下流程的编程语言Python,详细讲解Python语言中的变量和循序、分支、循环三大结构,以及列表和函数的使用,为之后学习算法打好基础。然后以通俗易懂的语言讲解双指针、哈希、深度优先、广度优先、回溯、贪心、动态规划和至短路径等经典算法。 ......一起来看看 《你也能看得懂的Python算法书》 这本书的介绍吧!