什么是单页应用

单页应用是一种基于移动 Web 的应用或者网站，这种 Web 应用大多数由一个完整的 HTML 页面组成，页面之间的切换通过不断地替换 HTML 内容或者隐藏和显示所需要的内容来实现，其中包括一些页面切换的效果，这些都由 CSS 和 DOM 相关的 API 来模拟完成。与单页应用相对应的就是多页应用，多页应用由多个 HTML 页面组成，页面之间的切换通过 <a></a> 标签完成，每次打开的都是新的 HTML 页面。

单页应用有以下特点：

  • 单页应用在页面加载时会将整个应用的资源文件都下载下来（在无 “懒加载” 的情况下）。

  • 单页应用的页面内容由前端 JavaScript 逻辑生成，在初始化时由一个空的 <div> 占位。

  • 单页应用的页面切换一般通过修改浏览器的哈希(Hash)来记录和标识。

结合上面的特点，单页应用首次打开页面时，不仅需要页面的 HTML 代码，还会加载相关的 JavaScript 和 CSS 静态资源文件，之后才可以进行页面渲染，因此用户看到页面内容的时间要稍长一些。另外，单页应用的 HTML 是一个空的 <div>，也不利于搜索引擎优化(Search Engine Optimization, SEO)。

在实现单页应用的页面切换时，要修改页面的哈希，例如，通过 http://localhost/index.html#page1 来模拟进入 page1 页面，通过 http://localhost/index.html#page2 来模拟进入 page2 页面。随着越来越多的页面需要相互跳转，而且需要相互传递参数，就需要一个数据对象可以维护和保存这些跳转逻辑，于是就引出了路由这个概念。采用 Vue.js 开发的单页应用都会推荐使用 Vue Router（下同 vue-router）来实现页面的路由管理。