zoukankan      html  css  js  c++  java
  • vue router生命周期说明

    vue router生命周期
    router中的参数
    router异步解析执行,此时router在 resolve 完之前一直处于 等待中。

    三个参数:

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

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

    next: Function: 一定要调用该方法来 resolve 这个钩子

    组件中路由的生命周期中的不同方法:
    beforeRouteUpdate(to, from, next) {
      this.type = to.params.type;
      this.onPullingDown();
    }
    组件中路由的生命周期中的不同方法:


    beforeRouteEnter (to, from, next) {
       // 在渲染该组件的对应路由被 confirm 前调用
       // 不!能!获取组件实例 `this`
       // 因为当守卫执行前,组件实例还没被创建
    },
       
     // 对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
     beforeRouteUpdate (to, from, next) {
       // 在当前路由改变,但是该组件被复用时调用
       // 可以访问组件实例 `this`
    },
       
     // 这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。
     beforeRouteLeave (to, from, next) {
       // 导航离开该组件的对应路由时调用
       // 可以访问组件实例 `this`
    }
    Vue中生命周期总结
    根组件实例:8个 (beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed)

    组件实例:8个 (beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed)

    全局路由钩子:2个 (beforeEach、afterEach)

    组件路由钩子:3个 (beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave)

    指令的周期: 5个 (bind、inserted、update、componentUpdated、unbind)

    beforeRouteEnter的next所对应的周期

    nextTick所对应的周期

  • 相关阅读:
    [Go] go build 和 go install 的区别
    [FAQ] Vmmem 内存占用高的问题 Win10 WLS2
    [FAQ] mogodb Robo3T 客户端全屏后 怎么退出全屏
    [FAQ] PHPStorm None project files detection
    [DApp] ethers.js VS Moralis
    [Pholcus] Go项目 Pholcus 编写静态规则文件, 0 到 1
    [Gse] 高效的Golang中文分析库推荐
    [FAQ] Edge/Chrome 网络请求的编辑并重发
    浏览器扩展开发Firefox临时载入附加组件(图)
    [FAQ] IDE: Goland 注释符后面添加空行
  • 原文地址:https://www.cnblogs.com/ivan5277/p/13213713.html
Copyright © 2011-2022 走看看