Vue路由

hash模式 和 history模式

• 相同点： 不管哪一种，他们都是客户端路由的实现方式，当路径发生变化之后，不会向服务器发送请求。使用JS监视不同的路径变化。

• 不同点：

  • 表现形式上：hash模式的#后面是路由地址，history模式是路径中有路由地址
  • 实现原理上：
    • hash模式基于锚点，通过监听onhashchange事件，当路由地址发生变化之后触发，根据路由地址决定加载对应的组件
    • history模式基于H5中的history API，即 history.pushState() 和 history.replaceState() 两种方法，history.pushState()方法只会改变浏览器中地址栏中的地址，并且把地址记录到历史记录中，不会向服务器发请求。
  • 实现过程上：
    • history配置需要服务器支持，hash不需要

• history.push()调用的时候路径会发生变化，这时要向服务器发送请求，history.pushState()方法只会改变浏览器中地址栏中的地址，并且把地址记录到历史记录中，不会向服务器发请求。
• history.pushState()只有IE10以后才支持，使用有兼容性问题

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。
路由导航守卫分为全局级别、路由级别和组件级别。

• 全局导航守卫有全局前置守卫beforeEach 、全局解析守卫beforeResolve 、全局后置守卫afterEach
• 路由守卫beforeEnter
• 组件内守卫有创建组件守卫beforeRouteEnter 、更新组件守卫beforeRouteUpdate 、离开组件守卫beforeRouteLeave

# 全局导航守卫

# 全局前置守卫

1. router.beforeEach(to,from,next)
2. return false就是跳转取消，不return或者return true就是继续跳转
3. next 是可选参数，传跳转的路由。

# 全局解析守卫

1. router.beforeResolve
2. 每次导航时都会触发，但是确保在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被正确调用
3. router.beforeResolve 是获取数据或执行任何其他操作（如果用户无法进入页面时你希望避免执行的操作）的理想位置。

# 全局后置钩子

1. router.afterEach
2. 第三个参数不是next，是可选的failure

# 路由独享守卫

1. 配置到路由规则里面的beforeEnter
2. beforeEnter 守卫 只在进入路由时触发，不会在 params、query 或 hash 改变时触发。
3. 可以传递函数，也可以传递函数数组

# 组件内守卫

1. beforeRouteEnter（组件示例没有被创建，不能获取组件实例this） 可以有第三个可选参数next，里面有一个参数vm的回调，可以通过vm访问实例

beforeRouteEnter (to, from, next) {
  next(vm => {  // 通过 `vm` 访问组件实例
  })
}

2. beforeRouteUpdate（路由改变复用组件调用，可以获取组件实例this）
3. beforeRouteLeave（导航离开渲染组件时调用，可以获取组件实例this）

1. 导航被触发
2. beforeRouteLeave
3. 全局的 beforeEach 守卫
4. 在重用的组件里调用 beforeRouteUpdate 守卫(2.2+)
5. 路由配置里调用 beforeEnter
6. 解析异步路由组件
7. beforeRouteEnter
8. 全局的 beforeResolve 守卫(2.5+)
9. 导航被确认
10. 全局的 afterEach 钩子
11. 触发 DOM 更新
12. 调用 beforeRouteEnter 守卫中传给 next 的回调函数，传入实例

可以用 onBeforeRouteUpdate 和 onBeforeRouteLeave 分别添加 update 和 leave 守卫。