vue-router

官方文档

路由模式

1. hash路由http://www.abc.com/#/hello：
   • 使用window.onHashChange来监听hash值的改变，一旦发生变化就找出此hash值所匹配的组件，进而将组件渲染到页面中。
   • url的hash发生变化时，不会向后端发送请求。
     实现原理
     1）vue-router会通过监听window对象的hashchange事件来捕获URL的变化。
     2）当URL的hash值发生变化时，vue-router会根据新的hash值找到对应的路由配置，并将对应的组件渲染到页面中的标签中。
2. history路由http://www.abc.com/hello：
   • 通过window.onpopstate来监听路由变化，进而匹配不同的组件来渲染出来。
   • 当 URL 发生变化时，浏览器会向服务器发送请求，服务器需要配置相应的路由规则，以确保在刷新页面或直接访问 URL 时能正确响应路由。
     实现原理
     1）vue-router会通过history.pushState()方法或history.replaceState()方法来改变URL的路径部分，而不会触发页面的刷新。
     2）当URL的路径发生变化时，浏览器会向服务器发送请求，服务器需要配置相应的路由规则来返回对应的页面。
     3）当服务器返回对应的页面后，vue-router会将返回的页面渲染到页面中的标签中。
     history关于404的处理

路由跳转

1. 声明式-router-link
2. 编程式导航

导航守卫

1. 全局前置守卫beforeEach((to, from, next) => {})：按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于等待中，如果不调用next，那么钩子不会被resolve
2. 全局解析守卫beforeResolve((to, from) => {})：获取数据或执行任何其他操作最优位置
3. 全局后置钩子afterEach
4. 路由独享的守卫beforeEnter：从一个不同的 路由导航时，才会被触发，只有路由变化才会调用，params、hash、query变化时不会调用
5. 组件内的守卫
   beforeRouteEnter：
   • 在渲染该组件的对应路由被验证前调用
   • 不能获取组件实例 this （因为当守卫执行时，组件实例还没被创建）
   • 可以通过传一个回调给 next 来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数

beforeRouteUpdate：在当前路由改变，但是该组件被复用时调用，可以访问组件实例this
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 的回调函数，创建好的组
13. 实例会作为回调函数的参数传入。

数据获取方式

• 导航完成之后获取：先完成导航，然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示“加载中”之类的指示。watch 路由的参数，以便再次获取数据

created() {
  // watch 路由的参数，以便再次获取数据
  this.$watch(
    () => this.$route.params,
    () => {
      // 获取数据
      this.fetchData() 
    },
    // 组件创建完后获取数据，
    // 此时 data 已经被 observed 了
    { immediate: true }
  )
},

• 导航完成之前获取：导航完成前，在路由进入的守卫中获取数据，在数据获取成功后执行导航。我们可以在接下来的组件的 beforeRouteEnter 守卫中获取数据，当数据获取成功后只调用 next 方法

beforeRouteEnter(to, from, next) {
  getPost(to.params.id, (err, post) => {
    next(vm => vm.setData(err, post)) // setData获取数据
  })
},
// 路由改变前，组件就已经渲染完了
// 逻辑稍稍不同
async beforeRouteUpdate(to, from) {
  this.post = null
  try {
    this.post = await getPost(to.params.id)
  } catch (error) {
    this.error = error.toString()
  }
},