1.什么是单页面应用

整个程序只有一个完整的.html文件,其他所谓的页面,其实仅仅是组件而已

2.普通多页面应用 VS 单页面应用

	普通多页面应用	单页面应用
请求次数	每切换一次页面,都要重新请求服务器,重新下载页面--请求次数多,慢	在首次加载时就将唯一完整的HTML页面和其他"页面"组件片段,都下载到客户端,今后切换"页面"时,其实.html文件不动,只更新局部的组件内容即可,且不用向服务器重新发送请求--请求次数少,快
页面加载效率	每切换一次页面,都要将旧的DOM树删除,下载新的页面后,重新建立完整DOM树--慢	因为每次切换页面,只更新局部内容,所以,不需要删除整个DOM树,只更新局部的组件内容即可--快
多页面资源共享(bootstrap,jQuery)	每次切换页面都要把整个页面重新扫描一遍,扫描到link和script,会重新发送请求--增大请求次数,浪费网络流量	完整的html文件只在首次加载一次,所以link和script,也只在首次下载一次,之后切换页面,link和script部分是不变的,所以,无需重复请求--减少请求次数,节约网络流量
页面切换动画	因为每次切换页面都是删除旧页面,下载新页面,导致前后两个页面不可能同时存在于客户端--几乎无法完成页面切换动画	因为单页面应用,所以所谓的页面都已经在客户端同时存在了,所以,完全可以实现页面切换动画

传统大页面应用的缺点:首屏加载极慢--因为首次加载时,就要把所有的页面的组件都下载下来,东西多--慢!

缺点:首屏加载太慢
(1).因为:即使用户不一定看到后续的页面,第一次也都要把所有的页面组件的内容都要下载下来--首页下载内容太多!
(2).解决:
  a.异步延迟下载:(脚手架默认选择)
    1).打包时,不要把所有组件打包在一个大的文件中,应该每个组件分开打包为单独的文件
    2).首屏加载时,只强制加载第一个组件的内容,后续组件由底层程序异步下载
    3).优点:不影响首屏加载速度,又能实现单页面应用的效果
    4).缺点:因为即使用户不看其他的内容,也会下载其他组件的内容,很浪费流量
  b.懒加载:(可通过配置脚手架实现)
    1).打包时,不要把所有组件在一个大的文件中,应该把每个组件分开打包为单独的文件
    2).首屏加载时,不会下载其他任何组件
    3).只有当用户确切切换到其他某个组件时,才临时下载用户想看的组件
    4).优点:省流量
    5).缺点:下载速度比加载在本地的组件稍慢
    6).但还是单页面应用!因为之后下载的只是页面中部分的组件内容而已,而不是完整的HTML页面
    但是已经被解决了:用懒加载

3.何时使用

今后几乎所有的前端框架都采用单页面应用的方法开发

4.如何使用

(1).先创建一个唯一完整的HTML文件要求

a.具有标准的vue页面结构:引入 vue.js, <div id="app">,new Vue({el:"#app"})
b.必须引入<script src="vue-rooter.js"></script>
c.在<div id="app">内必须使用<rooter-view></rooter-view>为将来要加载的页面组件占位
d.还要在new Vue()中添加router成员

(2).应用程序中要求有几个"页面",就要创建几个子组件.js文件

var 对象名={
    //内容同子组件完全一样!只不过当做页面用而已
}
强调:页面组件.js创建完成之后,也要引入唯一完成的HTML中

(3)创建一个VueRouter对象,在对象中定义一个路由字典列表

var rooter=new VueRouter({
       routers:[ 相对路径       路径对应的页面组件对象
               { path:"/",      component:index  },
               { path:"/;details",      component:details},
               ... ...
       ]
})
强调:创建完router对象后,一定要引入完整的html页面中,还要将router对象加入new Vue()中,否则new Vue()不识别<router-view>标签!
      new  Vue({
            el:"#app",
            ...,
            router
      })

全局组件

(1).定义一个全局组件
(2).所有页面都需要的全局组件(页头),应该放在唯一完整的html中<router-view>外部,
放在<router-view>外部的组件,所有页面默认都能显示
(3).如果有些页面有,有些页面没有的组件,应该放在各个组件内,不应该放在<route-view>外部

NotFound组件

(1).其实所有的网站都应该提供友好的404页面
(2)不同:每个普通的页面都有一个唯一的地址与只对应,但是404页面应该是除了正确的地址之外,其余所有地址都应该可以跳到404页面
(3)如何
   a.定义404 页面组件
   b.在routes数组中末尾添加:{path:"*",component:404组件}
     其中:
         1).*代表所有其他路径的意思
         2).因为当地址栏发生变化时,路由器router是按从上到下的顺序匹配routers数组中每个路径的,如果*凡在前面,则永远匹配,就无法跳转到其他页面了

5.页面跳转

(1).HTML中写死的

a.不好的做法:<a href="#/相对路径">
b.好的做法:用<router-link>代替a
      <router-link to="/相对路径">xxx</router-link>
      强调:to中的相对路径不要加#
      原理:router-link to会被自动翻译为<a href="#/xxx">
      链接激活样式:
        1).所有和当前地址栏中相对路径吻合router-link元素上都会被自动加上
        class="router-link-exact-active"
        2).只要在css中定义同名的class选择器,就可以无代码定义链接样式的激活方式

(2).js中用程序跳转: this.$router.push("/相对路径")

6.页面间传参(传参数据)

(1)修改路由字典数组中的路由对象定义

{path:"/相对路径/:变量名",component:页面组件对象,props:true}
   1).传参都是通过地址栏里的url传递的, :变量名, 即使传值时所使用的变量
   2).Props:true   可将将来通过地址栏的参数值,自动传给props中的同名变量.意思是:让地址栏中的变量名以及变量值自动成为下个页面的组件的props中的自定义属性.可将传来的变量值当做普通的变量一样在下个页面中用与绑定

(2).上一个页面跳转时:相对路径之后,只拼参数值即可 `/相对路径/参数值`

(3).结果:在接受参数值的页面中:

props:["变量名"]
组件内部,可将变量名用于绑定语法.
HTML跳转:<router-link to="/相对路径/变量值">  强调:不要加:
js中跳转:this.$router.push("/相对路径/变量值")
强调:一旦一个路由地址要求携带参数,则在用不带参数的地址就进不去这个路由地址了!

SPA(单页面应用)