Vue（七）SPA 单页面及应用方式「建议收藏」

SPA(Single Page Application) 单页面应用

单页面是指整个应用程序只有一个唯一完整的 HTML 页面，而其它所谓的页面，其实都是组件片段而已，切换页面也只是切换一个 HTML 中显示不同的组件片段。在今后所有的开发项目都是单页面应用。

1. 单页面应用与多页面应用对比

	多页面应用	单页面应用
请求次数	每切换一次页面，都向服务器端重新发送请求；反复切换页面就会反复发送请求，请求次数多。	在首次加载时，就将唯一完整的HTML页面和所有其余页面组件一起下载下来，即使反复切换页面也不需要反复向服务器发送请求，请求次数绝对少。
公共资源	每次切换页面，都要重新请求页面中的bootstrap.css、jquery.js、bootstrap.js等多个页面都要用到的资源，请求次数多加载慢。	每次切换页面时，唯一完整的HTML外壳没有切换，所以不会重复发送请求，下载css和js文件，请求次数又少了很多，同时加载效率高。
加载效率	每次切换页面，都要删除旧的整棵DOM树，重建整棵DOM树，效率低。	每次切换页面时，因为只跟换部分组件片段显示，整个页面没有更换，DOM树也只更换部分节点，不用重建整棵DOM树，效率高。
页面切换动画	几乎不可能实现页面切换动画，因为页面切换需要同时看到前一个页面的后一半以及后一个页面的前一半；多页面应用不可能两个页面同时存在，所以无法实现。	比较容易实现页面切换动画，因为单页面应用的所有页面组件已经同时保存在客户端了，同时显示也是有可能的。

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> 上方添加 <页头组件> 标签即可；如果有的页面有页头，有的页面不需要页头，就只在那些需要页头的组件中添加 <页头组件>。

一个完整的单页面应用文件结构如下：

Vue（七）SPA 单页面及应用方式「建议收藏」

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>`
}

效果如下：

在首页时，首页高亮显示；