vue-router源码解读

vue-router 解读

学习并实现一版简易的vue-router。

抛出问题

如何在没有vue-router等路由组件的情况下开发SPA？

• 保证浏览器URL改变无刷新
• 页面内容可以根据URL路径动态渲染
• 提供路由相关操作API

什么是路由

简单来说，路由就是用来和后端服务器进行交互的一种方式，通过不同的路径，请求不同的资源，请求不同的页面是路由的其中一种功能。

两种模式

hash模式

类似于htttp://blog.careteen.wang/#/login，#后面为hash部分，hash值变化，不会刷新页面，也就是浏览器不会向服务端发送请求，但会触发hashchange事件，通过监听这个事件，可以根据不同hash渲染不同视图。

history模式

由H5的APIpushState和replaceState去改变url但不会刷新页面，会触发popState事件，和hash模式原理一样，只是url更加美观，少了#，但是当用户刷新页面时，浏览器会向服务端发送请求，所以需要后端配置所有页面都重定向到根页面。

期望提供功能

• 如何挂载到Vue？
• 路由嵌套？
• 路由参数、查询、通配符？
• 重定向和别名
• 区分hash和history模式？
• 实现router-view和router-link组件？
• 为所有组件提供$route即当前路由信息和$router即操作路由的方法。
• 导航守卫
  • 全局
  • 路由
  • 组件
  • 完整的导航解析流程
    1. 导航被触发
    2. 在失活的组件里调用离开守卫beforeRouteLeave
    3. 调用全局的beforeEach守卫
    4. 在复用组件中调用beforeRouteUpdate守卫
    5. 在路由配置中调用beforeEnter守卫
    6. 解析异步路由组件
    7. 在被激活的组件里调用beforeRouteEnter守卫
    8. 调用全局的beforeResolve守卫
    9. 导航被确认
    10. 调用全局的afterEach守卫
    11. 触发DOM更新
    12. 用创建好的实例调用beforeRouteEnter守卫中传给next的回调函数
• 实现路由元信息
• 实现路由懒加载

示例

源码解析

• 路由注册，挂载到Vue实例上
• VueRouter对象
  • 初始化
  • 提供静态方法install
• Matcher
  • 通过createMatcher提供pathList/pathMap/nameMap
    • pathMap存放路径和组件相关信息
  • match:根据新老路径匹配为transitionTo做铺垫
• transitionTo路径切换
  • 路由导航
    • 同步执行异步队列 （实现思路和koa中间件原理一样）
  • url变化
  • 组件
    • router-view
      • 根据路由定义的层级关系确定router-view渲染的组件
      • 用depth确定嵌套的深度
    • router-link
• 总结
  • 路由切换过程
    • 先执行一系列导航守卫钩子函数
    • 更改url
    • 渲染对应的组件