单页面应用前端路由原理

什么是单页面应用？

单页面应用是指第一次进入页面的时候会请求一个 html 文件，切换到其他组件的时候，虽然路径会发生相应的变化，但是没有新的 html 文件请求，原理是 js 会感知到 url 的变化，js 会动态的将当前页面的内容清除掉，然后将下一个页面的内容挂载到当前页面上，这时候的路由不是后端做的而是由前端来做，来判断页面到底显示哪个组件，这个过程就是单页面的应用。

单页面应用的优缺点

优点：页面切换快，因为页面每次切换的时候，并不需要做 html 文件的请求，这样就减少的很多 http 发送的时延。

缺点：单页面应用的首屏加载时间比较慢，首屏加载需要一次 html 请求和一次 js 请求，时间相对较慢，而且 SEO 效果差，因为搜索引擎只认识 html 中的内容，但是单页面应用中内容很多需要靠 js 渲染出来，搜索引擎不识别这部分内容，就会导致 SEO 效果不好。

什么是多页面应用？

多页面应用是指每一次页面跳转的时候，服务器都会返回一个新的 html 文档，这种类型的应用叫做多页应用。

多页面应用的优缺点

优点：首屏加载快，SEO 效果好，因为客户端向服务端发起请求的时候，服务器之返回了一个 html 页面，所以加载比较快。

缺钱：页面切换比较慢

单页面应用和多页面应用的区别

1.应用构成不同
多页面应用是由多个不同的页面构成，单页面应用是一个外壳页面和多个页面片段构成。

2.页面跳转方式不同
多页面应用的页面跳转是从一个页面跳转到另一个页面，而单页面则是把一个页面判断删除或隐藏，加载另一个页面片段。

3.跳转后公共资源是否重新加载
跳转后多页面应用需要重新进行加载，但是单页面不需要重新加载

4.用户体验不同
多页面应用首屏加载快但是切换慢，单页面应用首屏加载慢但是切换快

5.页面传递数据方式不同
多页面应用依靠 url、cookie、localstorage 来传递数据，单页面应用则是靠组件进行通信，相对更加简单。

前端路由的原理

前端路由的原理本质上就是通过不刷新浏览器的请求下修改 url、检测 url 的变化，截获 url 的地址，通过解析、匹配路由规则从而实现 UI 的更新，路由的实现通常有两种实现：hash 模式、history 模式

hash 路由的原理

在 hash 模式下，在 url 中#后面的部分表示的是一个客户端状态，当这部分发生变化的时候，浏览器本身就不会刷新，这样就满足了第一个条件，即在不刷新浏览器的情况下修改浏览器链接，同时通过监听 hashChange 事件来监听 url 中 hash 值的变化，触发相关函数，改变相关组件。

history 路由的原理

history 模式利用 html5 中 history API，history.pushState 和 history.replaceState 这两个方法可以在不刷新页面的情况下，操作浏览器的历史记录，然后通过 popState 事件来监听 url 的变化，从而触发相关函数，改变相关组件。

history.back()、history.forward()、history.go()会触发 popstate 事件
history.pushState()、history.replaceState 不会出发 popstate 事件，需要对 replaceState 和 pushState 创建全局 Event 事件，然后 window.addEventListener 监听我们加的 event 事件
手动触发 popstate：
history.pushState({}, ‘’, ‘/new-path’);
window.dispatchEvent(new PopStateEvent(‘popstate’));