零基础学习 Vue.JS ——（7） 路由与混合

前端路由

前端路由在可多的框架中都得到支持，比如Angular.js、vue.js。
前端路由的主要作用就是让所有的交互在一个页面完成，从而减少服务器的请求，提高用户体验。现在越来越多的网站都应用到了前端路由的技术。

前端路由模板

使用前端路由，我们需要引入vue-router.js。vue-router是vue.js官方的路由插件，适用于构建单页面。
下载地址：vue-router.js
其中路由用来设定访问的路径，并将路径和组件映射起来。路劲的切换也就是组件的切换

	var router = new VueRouter({ 
		routes: [{
			path: "/home",
			component: Home 
			}, {
			path: "/about",
			component: About
		}]
	});

这样就设置好了访问的路径path，并和组件映射起来。
现在我们来创建Home和About两个组件构造器。

	var Home = {
		template: '<div><p>{{content}}</p></div>', 
		data: function () {
			return {
			content: '这是Home'
			} 
		}
	};
	var About = {
		template: '<div><p>关于我们</p></div>' 
	};

接下来要定义路由的链接在HTML的页面完成

	<div id="app"> 
		<h1>Hello 路由!</h1> 
		<p>
			<router-link to="/home">Home</router-link>
			<router-link to="/about">About</router-link>
		 </p>
		<router-view></router-view> //显示视图
	</div>

最后一步运行路由

var App = new Vue({
el: “#app”,
router: router
});
最后运行结果

点击Home或者About时，下面文字会切换。我们目前测试的时候写的内容是在template里，当你真正的要切换一个页面是，是不可能这么写的，具体的写法会在以后的博客中说明。

以上是vue.js前端路由的基础，这里提供一个进阶的手册。
vue.js 路由前端

vue.js的混合

混合十分灵活，可以为组件提供代码的复用功能。当某个组件使用了混合时，混合对象的所有选项将被加载到组件自己的选择中。

我们编写一个简单的例子来理解混合
web页面中我们经常可以看到弹窗，浏览器自带的弹窗十分的简陋，基本只能弹出一句话来提醒，无法加入更多的元素。所以我们可以自己写一个Modal然后封装起来，需要的时候直接混合到Vue对象中就可以了。

先定义一个html页面

	<p><input type="button" value="OK" @click="showModal('m1')"></p> 
	<div class="model" id="m1">
		<p>HelloWorld</p>
		<p><input type="button" value="关闭" @click="hideModal('m1')"/>
	</div>

添加CSS样式

.model {
	width: 500px;
	height: 300px; 
	background-color: #fff; 
	border-radius: 5px; 
	display: none; 
	padding: 10px;
}

.shade {
	background-color: rgba(0, 0, 0, 0.7); 
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 999;
	left: 0;
	top: 0;
	display: flex; //弹性布局
	justify-content: center; //使.shade里面的子元素居中
	align-items: center; //使.shade里面的子元素居中
}

因为本来的divdisplay:none而下面的.shade中添加的是弹性布局display:flex
所以.shade不能一开始就加入到div上，要在js中动态添加。

定义混合

	var modal = { 
		methods: {
			showModal: function (id) {
				$("#"+id).show();
				$("#"+id).wrap("<div class='shade'></div>");
		},
			hideModal:function (id) {
				$("#"+id).hide();
				$("#"+id).unwrap(); 
			}
		} 
	}

将混合应用到Vue对象中

var app = new Vue({
el: “#app”,
mixins: [modal]
});

混合与构造器的继承区别

构造器继承是所有 Vue 对象都会继承某些行为和内容,而混合的优势在于, 需要的时候,让 Vue 对象引入混合,不需要则不必引入。

混合与引用的区别是什么?

引用对象,是很多属性都要逐一引用,显得非常繁琐。而混合就很简单, 一句话就解决了问题。