●前端路由

●路由: 就是一一对应关系的集合
●前端路由: 就是一个 url 地址, 对应哪个组件(页面)
●前端路由的本质
○根据地址栏变化(不重新想服务器发送请求), 去局部更新不同的页面内容, 完成前端业务场景切换
●前端路由的思路
○URL 地址栏中的 Hash 值发生了变化
○前端 JS 监听到 Hash 地址的变化 window.onhashchange = () => {}
○前端 JS 把当前 Hash 地址对应的组件渲染到浏览器中
●SPA
○ 单页面应用 (single page application)
○就是只有一张 Web 页面的应用, 是加载单个 HTML 页面并在用户与应用程序交互时, 动态更新该页面的 Web 应用程序
简单实现

●当前所有的 展示内容, 都书写在了 这个 HTML 文件中, 这种写法在简单案例中没有什么不妥, 但是如果在实际开发中肯定不好
●因为每一个 展示的内容代码量都可能有很多, 所以放在一个文件内部会影响阅读体验, 所以我们可以将代码重新整理调整一下结构
代码结构调整
●SPA/components/templateA.js

●SPA/components/templateB.js

●SPA/components/templateC.js

● SPA/components/templateD.js

●SPA/router.js

●SPA/index.js

●SPA/index.

路由重定向
●路由重定向
○ 我们当前的的单页应用整体没什么大问题, 但是有一个小问题是首次进入页面的时候, 渲染区没有内容展示
○我们的解决方式也很简单, 就是在首次进入的时候, 将我们的路由重定向到 '/pageA'
○这样的话我们在首次进入页面的时候就能够展示出对应的内容
➢SPA/index.js

➢SPA/router.js

懒加载
●现在的问题是在我们当前的完成方式中
○首先会去运行 index.html
○运行时会以模块化的方式引入 index.js
○在 index.js 中, 我们我们在代码开始, 导入了 router.js
○此时引入导入的特性, 会将 router.js 中的代码全都执行一次
○而在 router.js 中, 我们又导入了 components 中的 四个文件
○所以也会把这四个文件的内容全都执行一遍, 哪怕有些文件在首次执行的时候并没有使用到
●所以此时出现了一个问题
○假如我 router.js 中有 200 个文件, 而我首次渲染的时候只用到了其中一个
○但是我们现在的写法, 在首次运行时仍然会将我 没用到的那 199 个文件, 都运行一遍
○有一种更好的方式就是我用到了什么文件, 你再加载什么文件即可, 所以我们现在需要使用 "懒加载" 来解决
●换句话说, 懒加载其实就是, 用到了那个文件, 我在加载那个文件, 而不是在开始的时候, 一股脑的全加载完
●方式也很简单, 我们首先是需要调整一下引入的方式
○语法; import('地址')
○注意: 这种引入方式是按照 promise 的语法封装的函数
○返回值: 因为使用 promise 封装的, 所以他的返回值不是我们默认导出的内容, 而是一个 promise 对象
○所以我们的 index.js 也需要适当的调整

➢SPA/router.js

➢SPA/index.js