单页面应用的前端路由原理是什么

文章来源：https://juejin.cn/post/7072893977472532517

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

单页面应用的优缺点
优点：页面切换快：因为页面每次切换的时候，并不需要做html文件的请求，这样就减少了很多http发送的时延。
缺点：单页面应用的首屏加载时间比较慢，首屏加载需要一次HTML请求和一次JS请求，时间相对较慢，而且SEO效果差，因为搜索引擎只认识HTML中的内容，但是单页应用中的内容很多需要靠JS渲染出来，搜索引擎不识别这部分内容，就会导致SEO效果不好。

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

多页面应用的优缺点
优点：首屏加载快，SEO效果好。因为客户端向服务端发送请求的时候，服务端只返回了一个HTML页面，所以加载比较快。
缺点：页面切花比较慢。
单页面应用和多页面应用的区别

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

页面跳转方式不同
多页面应用的页面跳转是从一个页面跳转到另一个页面，而单页面则是把一个页面片段删除或隐藏，加载另一个页面片段。
跳转后公共资源是否重新加载
跳转后多页面应用是需要进行重新加载的，但是单页面不需要重新加载。

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

页面传递数据方式不同
多页面应用依靠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的变化，从而触发相关函数，改变相关组件。