10 SPA + 路由简介

SPA

Single Page Application 单页面应用

单页面应用:
整个应用程序只有一个唯一完整的HTML页面，其它无所谓的“页面”,其实都是组件片段而已。所谓切换页面，只是在一个HTML中切换显示不同的组件片段而已。

创建单页面应用

1. 创建唯一完整的HTML页面

支持vue.js基本结构的空页面

<script src="js/vue.js"></script>
<div id="app"></div>
<script>
  new Vue({
    el: "#app"
  });
</script>

2. 创建所有"页面"组件文件

放入views文件夹中。每个组件都是子组件

3. 创建路由器对象

路由器对象： 根据浏览器地址栏的变化，自动选择对应的页面组件对象，自动更新到html中显示
路由器对象保存在router/index.js中

路由器对象

1. 创建路由字典

var routes = [
	{
		path:"/相对路径",
		component:"页面组件对象名"
	}
]; 

2. 创建路由对象

var router = new VueRouter({ routes: routes }); 
// var router = new VueRouter({routes});

使用

1. 引用

<script src="router/index.js"></script>

2. 将router对象加入new Vue()中

new Vue({
  router: router
  // router
})

3. 在将来的页面组件占位

<router-view><router-view>

<div id="app">
	<router-view></router-view>
</div>

路由对象三大功能

1. 监视地址变化栏
2. 查找当前路径对应的页面组件
3. 将找到的页面组件替换到<router-view>的位置

其它全局组件或子组件

1. 所有不足以成为一个页面的组件片段，都要集中创建在components文件夹中
2. 所有的组件，暂时都可以创建为子组件，且都要在唯一完整的HML页面中引入
3. 如果是全局组件，在new View()之前： Vue.component()间子组件对象转为全局组件 Vue.component("组件标签名",组件对象名)。再把<组件标签名>放到对应位置。

页面跳转

1. 在template中使用router-link

<router-link to="/相对路径"></router-link>
//相对路径： 和路由字典中path一致

router-link 会被翻译成<a href=""></a>

2. 在程序中自动跳转

this.$router.push("/相对路径")
// $router 表示我们创建的路由器对象

页面跳转 传值

① 配置路由字典中的路由字典项

var routes = [
	{
		path:"/相对路径/:变量名",
		component:"页面组件对象名"
		props: true
	}
];

props: true 让地址栏中的上一个页面传来的值，自动掉进下一个页面的props中。称为外来属性/变量

② 跳转携带参数值到下个页面

<router-link to="/相对路径/参数值"><router-link> 

或者

this.$router.push("/相对路径/参数值");

跳转接收的页面: props:["变量名"]