路由学习笔记一、前端路由的概念与原理

前端路由的概念与原理

• 什么是路由？
• 什么是前端路由？
• 单页面应用程序与前端路由
• 前端路由的工作方式
• 实现简易的前端路由

---

1、什么是路由

路由（router）: 对应关系

2、什么是前端路由？

Hash地址于组件之间的对应关系。

3、什么是SAP？SAP与前端路由

SPA：单页面应用程序是指一个web网站只有唯一的一个HTML页面，所有的组件的展示与切换都是在这唯一的页面的进行展示的。

在这个SPA中不同组件之间的动态切换就是通过前端路由实现的，SPA项目中，不同功能之间的切换，依赖于前端路由来完成。

3、前端路由的实现原理

点击页面上的路由连接，导致浏览器地址栏中的URL地址发生变化，前端路由监听到hash值得变化，前端路由把当前的hash地址对应的组件渲染到对应的显示区域。

4、手动实现简易的前端路由

通过动态组件component组件实现组件的动态显示，通过window.onhashchange监听到浏览器地址栏中的hash地址的变化。