[JavaScript知识库]前端路由和异步组件

课程目标：

P6：

• 针对 react / vue ，能够根据业务需求口喷 router 的关键配置，包括但不限于：路由的匹配规则、路由守卫、路由分层等。
• 能够描述清楚 history 的主要模式，知道 history 和 router 的边界；

P6+ ~ P7:

• 在没有路由的情况下，也可以根据业务需要，实现一个简单的路由；
• 读过 router 底层的源码，不要求每行都读，可以口喷关键代码即可；

课程实际情况

0-5 扯淡。
5-40 路由发展的背景， 和一些题
40-70 简单路由实现
70-90 异步路由、路由守卫
90-120 路由源码

课程大纲

• 路由发展的背景
• 实现简单的路由
• 讲解 vue-router 的相关用法:
  • 异步组件加载
  • 路由守卫
• 彩蛋：讲解 vue-router 1:1 源码

课程内容

什么是路由，以及路由的发展史

• 路由的概念，是伴随着 SPA 出现的，在此之前，页面的跳转是通过服务器控制的。
  • 传统的页面跳转，是通过前端向后台发送请求；
  • 后台通过模板引擎渲染，将一个新的 html 界面再返回给前台；
  • 比如页面跳转时：
    • a 标签的 href
    • from 表单
    • location.href
  • 在 SPA 出现以后，前端可以自由的控制组件的渲染，来模拟页面的跳转。
    • hash 路由 和 history 路由。

总结：

• 传统的路由，是根据 url 访问相关的controller ，进行数据资源和模板引擎的拼接，返回前端；
• 前端路由使用 js 根据 url 返回对应的组件加载。
  • 告诉服务端，不要处理路由 🔥1
  • 自己对 url 进行处理 🔥2 /a --> /b
  • 根据 url 的规则，匹配加载组件

hash 路由和 history 路由的区别？

• hash 路由一般会，携带一个 # 号，不够美观；history 路由不存在这个问题；
• 默认 hash 路由是不会像浏览器发起请求，主要一般是用于锚点； history 路由中的 go/back/forward 以及浏览器中的前进、后退按钮，一般都会向服务端发起请求；
• history 路由在部署的时候，需要设置只渲染首页；🔥1

# 单个服务器的部署
location / {
    try_files uri $uri /xxx/main/index.html
}

# 存在代理的情况
location / {
    rewrite ^ /file/index.html break; 
    proxy_pass https://www.luyi.cdn.com;
}

• 基于此，hash 路由是不支持 SSR 的； 但是 history 路由是可以的；
• hash 路由的监听，一般用 onHashChange 事件， history 路由的监听，onPopState 进行监听。

history 路由

history 本质上，是一个 BOM API，里面有 go / forward / back 三个API，以及 pushState / replaceState；

• pushState / replaceState 都不会触发 popState 事件；
• popState 什么时候触发？
  • 点击浏览器的前进、后退按钮；
  • back / forward / go

路由守卫的触发流程

1. [组件] - 前一个组件 beforeRouteLeave,
2. [全局] - router.beforeEach,
3. [组件] - 如果是路由的参数变化，触发 beforeRouteUpdate,
4. [配置文件]里 - 下一个 beforeEnter,
5. [组件] - 内部声明的 beforeRouteEnter,
6. [全局] - 调用 beforeResolve,
7. [全局] - router.afterEach

核心原理，promise 的链式调用。

hash 路由和 history 路由的区别？

• hash 路由一般会，携带一个 # 号，不够美观；history 路由不存在这个问题；
• 默认 hash 路由是不会像浏览器发起请求，主要一般是用于锚点； history 路由中的 go/back/forward 以及浏览器中的前进、后退按钮，一般都会向服务端发起请求；
• history 路由在部署的时候，需要设置只渲染首页；🔥1

# 单个服务器的部署
location / {
    try_files uri $uri /xxx/main/index.html
}

# 存在代理的情况
location / {
    rewrite ^ /file/index.html break; 
    proxy_pass https://www.luyi.cdn.com;
}

• 基于此，hash 路由是不支持 SSR 的； 但是 history 路由是可以的；
• hash 路由的监听，一般用 onHashChange 事件， history 路由的监听，onPopState 进行监听。

onPopState 可以监听到哪些事件？

go / forward / back 三个API，以及点击浏览器的前进、后退按钮；

history.go / back 一定会刷新吗？

要根据指定页面和当前界面的构建关系，动态决定；

路由守卫的触发流程

1. [组件] - 前一个组件 beforeRouteLeave,
2. [全局] - router.beforeEach,
3. [组件] - 如果是路由的参数变化，触发 beforeRouteUpdate,
4. [配置文件]里 - 下一个 beforeEnter,
5. [组件] - 内部声明的 beforeRouteEnter,
6. [全局] - 调用 beforeResolve,
7. [全局] - router.afterEach

说一下你理解的 code splitting

本质上是构建时，如 webpack，会对代码进行拆包，通过 Promise.all 嵌入异步脚本的方式，进行加载。

开发者涨薪指南

48位大咖的思考法则、工作方式、逻辑体系