前端路由的概念与原理

1. 什么是路由

路由 (英文：router) 就是对应关系

3. SPA 与前端路由

SPA 指的是一个web 网站只有唯一的一个HTML 页面，所有组件的展示与切换都在这唯一的一个页面内完成。此时，不同组件之间的切换需要通过前端路由来实现

结论：在SPA项目中，不同功能之间的1切换，要依赖于前端路由来完成！

4. 什么是前端路由

通俗易懂的概念：Hash 地址与组件之间的对象关系。

5. 前端路由的工作方式

1 用户点击了页面上的路由链接

2 导致了URL 地址栏中的 Hash 值发生了变化

3 前端路由监听了到 Hash 地址的变化

4. 前端路由把当前Hash 地址对应的组件渲染到浏览器中

 

结论：前端路由，指的是 Hash 地址 与 组件之间 的 对应关系 ！

6. 实现简易的前端路由

步骤1：通过 <component> 标签，结合 comName 动态渲染组件。示例代码如下：

步骤2：在 App.vue 组件中，为 <a> 链接添加对应的 hash 值： 

                ​​​​​​​        ​​​​​​​        

步骤3：在 created 生命周期函数中，监听浏览器地址栏中 hash 地址的变化 ，动态切换要展示的组件的名称：