SPA(Single Page Application) 单页面应用
单个页面是整个APP应用程序中唯一完整的HTML页面，而其他页面实际上是组件片段，只需在一个HTML中显示的不同组件片段之间切换即可。 今后所有的发展项目都是单页面APP应用。
单页面应用与多页面应用对比：
多页面应用
单页面应用
请求次数
每次切换页面时，重复切换向服务器端重新发送请求的页面会导致重复请求，请求次数增加。
第一次加载时，只下载完整的HTML页面和所有剩余页面组件，重复页面不需要向服务器重复发送请求，请求次数极少。
公共资源
每次切换页面时，都会重新请求页面中许多页面使用的资源，如bootstrap.css、jquery.js和bootstrap.js，请求次数多，加载速度慢。
每次切换页面时，唯一完整的html shell无法切换，因此不会重复发送请求，下载css和js文件，请求次数将大大减少，同时加载效率也将提高。
加载效率
每次切换页面时，删除整个旧DOM树并重建整个DOM树是低效的。
每次切换页面时，只显示部分组件的片段，因此不交换整个页面，DOM树也只交换部分节点，不需要重建整个DOM树，非常高效。
页面切换动画
因为页面切换动画需要同时看到上一页的后半部分和后一页的前半部分，所以很少能实现多页面APP应用程序，因为两个页面并不是同时存在的。
由于单页面APP应用程序中的所有页面组件都可能同时存储在客户端上并同时出现，因此可以相对容易地实现页面切换动画。
单页面应用步骤：
(1)首先创建唯一完整的HTML页面(支持vue基本结构的空白页)
script src=' js/vue.js ' body divid=' app '/divscriptnewvue ({ El : ' # app '，} )/script/body (2) ) 2
a .如果项目中有几个“页面”，请创建几个页面组件文件；
b .所有页面组件都必须放在名为views的文件夹中；
c .每个页面组件实际上是一个子组件。
d .在唯一完整的HTML页面顶部部署页面组件
创建e.404页面组件，用唯一完整的HTP
ML页面顶部引入，加入到路由字典中最后一项： { 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>上方添加<页头组件>标签即可；如果有的页面有页头，有的页面不需要页头，就只在那些需要页头的组件中添加<页头组件>。
一个完整的单页面应用文件结构如下：
SPA路由跳转：
（1）在HTML中写死的跳转连接
<router-link to="/相对路径">文本</router-link><router-link to="/xxx"</router-link>会被翻译为<a rel="external nofollow" href="xxx"></a>，翻译过程中vue会对a做一些自动的加工。
（2）在程序中自动跳转
this.$router.push("/相对路径")（3）路由跳转传参
a.配置路由字典中的路由字典项；
{ path:"/相对路径/:变量名", component: 页面组件对象名, props:true}//:变量名 表示为上个页面传到下个页面的值起一个变量名，便于重复使用//props:true 让地址栏中的上个页面传来的值，自动掉入下一个页面的props中成为一个外来属性/变量b.跳转时携带参数值到下个页面；
<router-link to="/相对路径/参数值">//或者this.$router.push("/相对路径/参数值")//路由传参，在路由字典项的path中定义变量时必须加://但在跳转时传参时既不用加:也不用加变量名，写参数值即可c.在下个页面中直接使用props中外部传来的变量。
props:[ "变量名" ] 如下：
举例：实现单页面应用(以上述文件结构为基础)；
index.html
<html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="js/vue.js"></script> <script src="js/vue-router.js"></script> <script src="views/Detail.js"></script> <script src="views/Index.js"></script> <script src="views/NotFound.js"></script> <script src="router/index.js"></script> <script src="components/MyHeader.js"></script></head><style> .router-link-exact-active { background-color: rgb(78, 75, 75); width: 50px; padding: 5px; border-radius: 5px; color: white; text-decoration: none; }</style><body> <div id="app"> <!--为所有页面添加页头--> <!-- <my-header></my-header> --> <router-view></router-view> </div> <script> //将普通子组件MyHeader转为全局组件 Vue.component("my-header", MyHeader); new Vue({ el: "#app", router }) </script></body></html>views/Index.js
var Index = { template: ` <div> <my-header></my-header> <h1 style="color:red">这里是首页</h1> <button @click="goto(1)">查看1号商品详情</button> <button @click="goto(5)">查看5号商品详情</button> <button @click="goto(13)">查看13号商品详情</button> </div> `, methods: { goto(lid) { // 程序中自动跳转 this.$router.push(`/detail/${lid}`) } }}views/Detail.js
var Detail = { props: ["lid"], template: ` <div> <my-header></my-header> <h1 style="color:blue">这里是详情页</h1> <h2>显示{{lid}}商品的详细信息...</h2> </div> `}views/NotFound.js
var NotFound = { template: ` <div> <h2 style="color:yellow">404:嘿！走到哪儿了！</h2> </div> `}router/index.js
var routes = [{ path: "/", //用户运行后直接进入首页 component: Index }, { path: "/detail/:lid", component: Detail, props: true }, { path: "*", //除输入正确之外的所有情况 component: NotFound }];var router = new VueRouter({ routes});components/MyHeader.js
var MyHeader = { template: `<div> <h1 style="color:orange">这里是页头</h1> <ul> <li><router-link to="/">首页</router-link></li> <li><router-link to="/details">详情页</router-link></li> </ul> <hr> </div>`}效果如下：
在首页时，首页高亮显示；
点击第一个按钮；
404界面；