单页面应用

单页面应用也称为SPA(Single Page Application)，它主要是网页的界面渲染在一个静态的页面上，当用户要从当前界面跳到另一个界面的时候，在这个过程中，不需要重新加载整个页面，所以页面之间的切换十分快速。

多页面在进行页面切换时十分缓慢，在路由进行跳转的时候会加载所有的资源，而且页面重复代码多。

对比之下，单页面原理是JavaScript动态修改内容而已，资源只需要局部的刷新，因此SPA具有极高的流畅度，有利于提升用户体验。

本系统的页面过多决定了单页面应用更加合适。无论从用户体验还是维护成本等方面，单页面应用都具有极大的优势。单页面应用有利于提升用户体验，而且能够减轻服务端压力，使前后端职责分工更加清晰。单页面应用和多页面应用的区别如表3-2所示。

表 3-2 单页面应用和多页面应用的区别表

通过对比，虽然单页面存在首屏加载慢、不利于SEO、开发成本较高等情况，但是它们有对应的解决方案。

首先是首屏加载慢这一缺陷，其实首屏加载优化方法有很多，本系统使用的首屏加载优化方案大致的思维导图如图3-5所示。

图 3-5 首屏加载优化方案图

其次是不利于SEO（搜索引擎），SPA基本是自定义标签，浏览器无法识别，但是可以使用服务端渲染SSR，一套专门给搜索引擎浏览的页面。

最后，是页面的切换不能使用浏览器自带的前进后退功能，但是 Vue 提供的 Vue-Router 可以解决这个问题。Vue-Router有push()和replace() 两个方法。

Push()方法的原理是，在历史记录中，把将要跳去的新页面路由加到浏览器访问过的栈顶 ，原理如图3-6所示，而Replace()方法的原理主要是替换掉当前路由，原理如图3-7所示。

本系统大多数使用this.$router.push来进行页面的跳转。

图 3-6 Vue-Router的push()方法原理图

图 3-7 Vue-Router的replace()方法原理图