SPA应用：
①单页面应用
②vs多页面应用
1.页面个数 单页面：多个.html文件
多页面：只有一个完整的.html文件,其余"页面"，其实都是HTML模板片段
2.页面跳转 多页面：删除整颗DOM树，重新下载新的.html文件，重建新的DOM树
单页面：重新加载一个HTML模板片段局部替换指定元素位置即可
3.组件重用 多页面：即使有可重用的组件，每个页面必须重新请求一次
单页面：只加载一次，可多个组件，反复公用
4.页面切换动画 多页面：不可能实现
单页面：轻松实现
Vue-router插件：
1.创建一个唯一完整的.html页面
①引入vue.js和vue-router.js
②创建根元素
<div #app>
...
<router-view></router-view>
2.定义各个组件的HTML模板
<template id="子">
...
也可以包含<router-view></router-view>
3.封装组件对象:
①js中:var 子={
template:
data(){
return { }
},
methods:{ }
...
}
4.定义路由词典:
var routes=[
{path:"相对路径"，component:子组件对象}
]
5.创建路由词典封装路由词典
var router=new VueRouter({ routes })
6.定义根组件实例,加载路由器
new Vue({
//el:"#app"
router
}).$mount("#app")
测试：http://域名#/相对路径
路由地址间跳转:
HTML中 <router-link :to="/main/start">跳转</router-link>
JS中 this.$router.push("/main/start");
this.$router.go(-2)；
嵌套路由：var routes=[
{path:"/login",component:Login},
{path:"/main",compoent:Main,children:[
{path:"/main/start",component:Start},
{path:"/main/plist",compoent:ProductList},
]},
]
Main:{ template:'... <router-view/>' }
路由参数：
1.路由词典中: { path:"相对路径/:参数名",compoent:xxx,props:true}
2.在页面组件中添加同名自定义属性: props:["参数名"]
3.跳转时: /相对路径/参数值
4.结果:参数值会自动传给props中的参数名属性,在页面组件中，可用this.参数名方式，访问！