VUE路由钩子及使用场景

栏目: 编程语言 · 发布时间: 5年前

内容简介:可以在路由发生变化时进行一些特殊的处理三类钩子:1、全局钩子

一、路由钩子

可以在路由发生变化时进行一些特殊的处理

三类钩子:

1、全局钩子

2、某个路由独享的钩子

3、组件内钩子

主要都有三个参数:

to: Route: 即将要进入的路由对象

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

next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

next(): 进行下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。

next(false): 中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。

next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。

  1. 全局守卫 使用全局路由钩子,一定要调用next()

    import Router from 'vue-router'
    Vue.use(Router)
    const router = new Router()
    router.beforeEach((to,from,next)=>{
       ......
       next()
    })

    当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于 等待中

  2. 路由独享的守卫(路由内钩子)在路由配置上直接定义

    export default new Router({

    routes: [
              {
              path: '/',
              name: 'home',
              component: Home,
            beforeEnter: (to, from, next) => {
                   ...
               }
           }
       ]
    })
  3. 组件内的守卫(组件内钩子)

    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()
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

设计模式之禅(第2版)

设计模式之禅(第2版)

秦小波 / 机械工业出版社 / 2014-2-25 / 89.00元

本书是设计模式领域公认的3本经典著作之一,“极具趣味,容易理解,但讲解又极为严谨和透彻”是本书的写作风格和方法的最大特点。第1版2010年出版,畅销至今,广受好评,是该领域的里程碑著作。深刻解读6大设计原则和28种设计模式的准确定义、应用方法和最佳实践,全方位比较各种同类模式之间的异同,详细讲解将不同的模式组合使用的方法。第2版在第1版的基础上有两方面的改进,一方面结合读者的意见和建议对原有内容中......一起来看看 《设计模式之禅(第2版)》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具