定义
单页面应用就是一个应用只有一个唯一的完整的html,其他所谓的页面，都以组件片段的形式呈现出来。切换页面也只是切换一个html中不同的组件展示形式。
单页面和多页面的对比
| 单页面应用 | 多页面应用 | |
|---|---|---|
| 请求次数 | 在首次加载时，就将唯一的一个html页面和其余组件下载下来，即使反复请求也不需要多次向服务器申请，请求次数少 | 每次切换页面都要向服务器发送请求 |
| 公共资源 | 每次切换页面时候，由于唯一的html外壳没有变，所以不需要重新下载css和js公共资源，请求次数减少，加载快 | 每次切换页面时候，都要重新下载公共资源，请求次数多，下载慢 |
| 加载效率 | 每次切换页面，都要删除整个dom树，重新构建整个dom树，效率低 | 每次切换页面，因为只是部分组件片段显示，整个页面没有更换，dom树只是更换部分节点，不用重新构建整棵dom树，加载效率高 |
| 页面切换动画 | 比较容易实现页面切换动画，因为单页面应用的组件都同时保存在客户端了，同时呈现是有可能的 | 几乎不可能实现页面切换动画，因为切换动画，需要同时显示前一个页面的后半段和后一个页面的前半段，多页面应用不可能两个页面同时存在，所以不可能实现页面切换动画 |
单页面应用步骤
（1）先创建唯一完整的 HTML 页面（一个支持 vue 基本结构的空页面）
<script src="js/vue.js">
<body>
<div id="app">
</div>
<script>
new Vue({
el: "#app",
})
</script>
</body>
（2）创建所有"页面"组件文件
a. 项目中，有几个"页面"，就要创建几个页面组件文件；
b. 所有页面组件都要集中放在一个名为 views 的文件夹中；
c. 每个页面组件其实都是一个子组件；
d. 在唯一完整的 HTML 页面顶部引入页面组件；
e. 创建 404 页面组件，在唯一完整的 HTML 页面顶部引入，加入到路由字典中最后一项：
{ path:"*", component:NotFound }
//其中“*”表示除正确输入之外的所有情况
（3）创建路由器对象
a. 在唯一完整的 HTML 页面顶部引入 vue-router.js（官方）；
b. 创建路由器对象。先将路由器对象保存在 router/index.js 文件中；然后先创建路由字典，再创建路由器对象；
//创建路由器字典 var routes=[ {path:"/相对路径", component:页面组件对象名}, ... ]
//创建路由器对象
var router=new VueRouter({ routes })
c. 引入到唯一完整的 HTML 页面中；
<script src=“router/index.js”>
d. 将 router 对象加入到 new Vue() 中，这样 router 对象才可以修改页面中的内容；
new Vue({
el:"#app",
router
})
e. 在唯一完整的 HTML 页面中 <div id="app"> 内，添加 <router-view></router-view> 标签，用于为将来的页面组件占位。
补充：路由器对象的三大功能（高频笔试面试）
监视地址栏变化；
查找当前路径对应的页面组件；
将找到的页面组件替换到<router-view>的位置。
（4）创建除页面以外的其它全局组件或子组件（如页头）
a. 所有不足以成为一个页面的组件片段都要集中创建在 components 文件夹中；
b. 所有的组件，暂时都创建为子组件，且都要在唯一完整的 HTML 页面中引入；
c. 如果是全局组件，只要在 new Vue() 之前，使用 Vue.component() 将子组件对象转为全局组件即可。
Vue.component("组件标签名", 组件对象名);
如果所有页面都需要显示页头，则只要在 router-view 上方添加 <页头组件> 标签即可；如果有的页面有页头，有的页面不需要页头，就只在那些需要页头的组件中添加 <页头组件>。
一个完整的单页面应用文件结构如下：
