前言
最近看到一些人在问单页面和多页面应用的区别。因为最近在整理 Vue 相关的内容，所以也就输出这一篇短文希望可以给你一个整体的认识。
这里也会大体介绍单页应用实现的核心 —— 前端路由。
单页应用 VS 多页应用
直观对比图
单页应用（SinglePage Application，SPA）
指只有一个主页面的应用，一开始只需加载一次
js,css等相关资源。所有的内容都包含在主页面，对每一个功能模块组件化。单页应用跳转，就是切换相关组件，仅刷新局部资源。
多页应用（MultiPage Application，MPA）
指有多个独立的页面的应用，每个页面必须重复加载
js,css等相关资源。多页应用跳转，需要整页资源刷新。
两者对比表格：
SPA | MPA | |
|---|---|---|
结构 | 一个主页面 许多模块的组件 | 许多完整的页面 |
体验 | 页面切换快，体验佳；当初次加载文件过多时，需要做相关的调优。 | 页面切换慢，网速慢的时候，体验尤其不好 |
资源文件 | 组件公用的资源只需要加载一次 | 每个页面都要自己加载公用的资源 |
适用场景 | 对体验度和流畅度有较高要求的应用，不利于 SEO（可借助 SSR 优化 SEO） | 适用于对 SEO 要求较高的应用 |
过渡动画 | Vue 提供了 transition 的封装组件，容易实现 | 很难实现 |
内容更新 | 相关组件的切换，即局部更新 | 整体 HTML 的切换，费钱（重复 HTTP 请求） |
路由模式 | 可以使用 hash ，也可以使用 history | 普通链接跳转 |
数据传递 | 因为单页面，使用全局变量就好（Vuex） | cookie 、localStorage 等缓存方案，URL 参数，调用接口保存等 |
相关成本 | 前期开发成本较高，后期维护较为容易 | 前期开发成本低，后期维护就比较麻烦，因为可能一个功能需要改很多地方 |
单页应用实现 —— 前端路由
前端路由的核心：改变视图的同时不会向后端发出请求。
这里我讲讲 vue-router 路由的两种模式：hash&history
hash 模式
hash 模式背后的原理是 onhashchange 事件。
window.addEventListener('hashchange',function(e) {
console.log(e.oldURL);
console.log(e.newURL)
},false);通过
window.location.hash属性获取和设置hash值。
由于 hash 发生变化的 url 都会被浏览器记录下来，所以浏览器的前进后退可以使用，尽管浏览器没有请求服务器，但是页面状态和 url 关联起来。后来人们称其为前端路由，成为单页应用标配。
hash 模式的特点在于 hash 出现在 url 中，但是不会被包括在 HTTP 请求中，对后端没有影响，不会重新加载页面。
history 模式
利用了 HTML5 History Interface 中新增的
pushState()和replaceState()，它们提供了对历史记录进行修改的功能。
相关的 API:
history.pushState()
代码语言：javascript复制history.pushState(stateObj, title, url);- state：一个与指定网址相关的状态对象，
popstate事件触发时，该对象会传入回调函数。如果不需要可填null。 - title：新页面的标题，但是所有浏览器目前都忽略这个值，可填
null。 - url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。
例如：
history.pushState('new','new','new.html');
添加上面这个新记录后，浏览器地址栏立刻显示 ~/new.html，但并不会跳转到 new.html，它只是成为 history 中的最新记录。pushState 方法不会触发页面刷新，只是 history 对象变化，地址栏会变。
history.replaceState()
代码语言：javascript复制history.replaceState(stateObj, title, url);参数同 pushState() 一样。
调用该方法，会修改当前的 history 对象记录， history.length 的长度不会改变
history.state
当前 URL 下对应的状态信息。如果当前 URL 不是通过 pushState 或者 replaceState 产生的，那么 history.state是 null。当需要 state 和 URL 同步时可以使用 replaceState() 使之同步。
popstate 事件
同一个文档的
history对象出现变化时，就会触发popstate事件。
不同的浏览器在加载页面时处理 popstate 事件的形式存在差异。页面加载时 Chrome 和 Safari 通常会触发 popstate 事件，但 Firefox 则不会。
注意：
调用 history.pushState() 或者 history.replaceState() 不会触发 popstate 事件. popstate事件只会在浏览器某些行为下触发, 比如点击后退、前进按钮(或者调用 history.back()、history.forward()、history.go()方法)。
Vue 相关文章输出计划
最近总有朋友问我 Vue 相关的问题，因此接下来我会输出 10 篇 Vue 相关的文章，希望对大家有一定的帮助。我会保持在 7 到 10 天更新一篇。
- Vuex 注入 Vue 生命周期的过程（完成）
- 学习 Vue 源码的必要知识储备（完成）
- 浅析 Vue 响应式原理（完成）
- 新老 VNode 进行 patch 的过程
- 如何开发功能组件并上传 npm
- 从这几个方面优化你的 Vue 项目
- 从 Vue-Router 设计讲前端路由发展
- 在项目中如何正确的使用 Webpack
- Vue 服务端渲染
- Axios 与 Fetch 该如何选择
本篇内容来源自：小生方勤
