Vue实现SPA

SPA（整个应用程序在一个时间点只有一个完整的页面（gmail、螺丝刀），其余的都是代码片段）工作原理：
1.解析地址栏中的完整的页面地址和路由地址
2.加载完整的页面（发请求）
3.根据路由地址，从路由词典中 找到该路由地址所对应的配置对象，进而找到需要加载的模板页面地址
4.发请求，加载页面
5.将页面加载到指定的容器（完整的页面）中

vue实现spa（vuerouter的本质是建立起url和页面之间的映射关系）的基本步骤：
1.指定一个容器

<router-view></router-view>

2.创建页面（创建组件）
3.配置路由词典

const Myroutes = [
 {path: '', component: Login}
]
const Myrouter = new VueRouter({
  routes: Myroutes
})

new Vue({
  router: Myrouter
})

4.测试：直接修改地址栏中的路由地址，看是否能够加载所设置的正确的组件

路由配置规则：

//为空
 {path："",component:login}
//正常情况
{path:'/mylogin',component:login}
//为异常 
{path:'*',component:notfound}

路由跳转

this.$router.push(路由地址)

<router-link to="路由地址"></router-link>

传参

//发送
this.$router.push('/mylogin/zhangsan')
//接收
//配置接收方的路由地址
{path: '/mylogin/:uname'}
this.$route.params.uname

路由嵌套
举例，比如a组件，现在需要根据需求在不同的路由地址下，分别加载b和c

//①给a组件指定容器
<router-view></router-view>
//②配置路由词典，给a组件指定children属性
{
  path: '/mya',
  component: a,
  children: [
     {path: '/myb', component: b},
     {path: '/myc', component: c}
  ]
}