• vue-router


    一、导航解析流程

    1 导航被触发

    2 在失活的组件里调用离开守卫beforeRouteLeave(to,from,next)

    3 调用全局前置守卫 beforeEach(to,from,next)

    4 在复用的组件里调用beoreRouteUpdate(to,from,next)

    5 在路由配置里调用路由独享的守卫beforeEnter()

    6 解析异步路由组件

    7 在被激活的组件里调用beforeRouteEnter(to,from,next)

    8 调用全局解析组件beforeResolve

    9 导航被确认

    10 调用全局后置守卫afterEach()

    11 触发DOM更新

    12 用创建好的实例调用beforeRouteEnter守卫中传递给next的回调函数

    二、路由守卫分类

    1 全局前置守卫  beforeEach

    2 全局后置守卫 afterEach

    3 全局解析守卫 beforeResolve

    4 路由专享守卫 beforeEnter

    5 组件内守卫 beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave

    三、vue-router的两种模式

      分别是hash模式和history模式

      1 hash模式,就是url中带#号的模式,#号以及#号后面的为url的hash,通过location.hash获取;

      hash模式的实现原理是onhashchange事件,通过监听这个事件来触发页面的更新

      典型的应用网站有网易云音乐

      2 history模式,更好看的url显示,没有#

      history是通过history api实现的,在HTML5中添加了pushstate(),replacestate()两个方法,顾名思义是向浏览器历史状态中添加状态或修改状态

      当修改或者添加状态后,进行浏览器动作时,就会触发popstate事件,以此来更新页面

      需要后端配合处理404问题

      

      

      

  • 相关阅读:
    iOS.UIKit.02.UIButton_UILabel
    iOS.UIKit.01.UIView
    如何下载Android源码(window和Linux)
    在Android的c/c++代码中使用LOG
    Android LOG机制流程图
    PowerManager源码
    Android电源管理简介(下)
    Android电源管理简介(上)
    PowerManager使用实例1(下)
    PowerManager使用实例1(上)
  • 原文地址:https://www.cnblogs.com/linhongjie/p/12459711.html
Copyright © 2020-2023  润新知