目录
SPA(Single Page Application) 单页面应用
1. 单页面应用与多页面应用对比
2. 单页面应用步骤
3. SPA路由跳转
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() 之前，使用 ponent() 将子组件对象转为全局组件即可。
ponent("组件标签名", 组件对象名);
如果所有页面都需要显示页头，则只要在 <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转为全局组件ponent("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界面；
