单页面应用也称为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()方法原理图