路由Router

1、为什么会出现前端路由。

2、前端路由解决了什么问题。

3、前端路由实现的原理是什么。

 

 

-------------------------------------------------------------

传统页面：DOM直出的页面，SSR属于首屏直出。

DOM直出页面：浏览器输入网址发起请求，返回来的HTML文件（document）是页面最终呈现的页面。并且每次跳转页面，都会重新请求HTML资源以及CSS资源。

验证方式：1、显示网页源代码。2、看加载网页资源。

 

 

 

-----------------------------------------------------------------------------------

 

单页面（SPA）：

需求复杂度，产出一些优秀的前端框架React、Vue、Angular。单页面应用前端框架。

这些框架的共同的特征就是：通过JavaScript渲染页面。（页面通常有一个页面入口，即挂载点。通过app.js文件动态渲染挂载到页面。）

 

单页面，面临的问题是，当页面需要跳转时，前端如何处理。这时候前端路由技术应用而生。

前端路由的出现就是解决了单页面应用，页面跳转的问题。即通过切换浏览器地址路径，来匹配相对应的页面组件！

 

更详细的过程：

前端路由 会根据浏览器地址栏 pathname 的变化，去匹配相应的页面组件。然后将其通过创建 DOM 节点的形式，塞入根节点 <div id="root"></div> 。这就达到了无刷新页面切换的效果，从侧面也能说明正因为无刷新，所以 React 、 Vue 、 Angular 等现代框架在创建页面组件的时候，每个组件都有自己的 生命周期 。

 

 

前端路由插最火的  Vue-Router   \   React-Router

逻辑原理是一样的。

 

前端路由的两种模式：

　　哈希模式（Hash模式）：

　　a 标签锚点大家应该不陌生，而浏览器地址上 # 后面的变化，是可以被监听的，浏览器为我们提供了原生监听事件 hashchange ，它可以监听到如下的变化：

 

　　历史模式（History模式）：