SPA(Single Page Application) 单页面应用
单页面是指整个应用程序只有一个唯一完整的 HTML 页面，而其它所谓的页面，其实都是组件片段而已，切换页面也只是切换一个 HTML 中显示不同的组件片段。在今后所有的开发项目都是单页面应用。
1. 单页面应用与多页面应用对比
2. 单页面应用步骤
（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> 上方添加 <页头组件> 标签即可；如果有的页面有页头，有的页面不需要页头，就只在那些需要页头的组件中添加 <页头组件>。
一个完整的单页面应用文件结构如下：
3. SPA路由跳转
（1）在 HTML 中写死的跳转连接
<router-link to="/相对路径">文本</router-link>
<router-link to="/xxx"</router-link> 会被翻译为 <a 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界面；
