标签:bow 简单 设置 bower art var link lan 简单实现
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="bower_components/vue/dist/vue.js"></script>
	<script src="bower_components/vue-router/dist/vue-router.js"></script>
	<style>
	</style>
</head>
<body>
	<div id="box">
		<ul>
			<li>
				<a v-link="{path:‘/home‘}">主页</a>
			</li>
			<li>
				<a v-link="{path:‘/news‘}">新闻</a>
			</li>
		</ul>
		<div>
			<router-view></router-view>
		</div>	
	</div>
	<script>
		//1. 准备一个根组件
		var App=Vue.extend();
		//2. Home News组件都准备
		var Home=Vue.extend({
			template:‘<h3>我是主页</h3>‘
		});
		var News=Vue.extend({
			template:‘<h3>我是新闻</h3>‘
		});
		//3. 准备路由
		var router=new VueRouter();
		//4. 关联
		router.map({
			‘home‘:{
				component:Home
			},
			‘news‘:{
				component:News
			}
		});
		//5. 启动路由
		router.start(App,‘#box‘);
		//6. 跳转
		router.redirect({//设置跳转页面
			‘/‘:‘home‘
		});
	</script>
</body>
</html>
标签:bow 简单 设置 bower art var link lan 简单实现
原文地址:https://www.cnblogs.com/zhangzhiqin/p/9571340.html