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问题