vue框架的vue-router路由的运用

用 Vue.js + Vue Router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 Vue Router 添加进来，我们需要做的是，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../node_modules/vue/dist/vue.js"></script>
		<script src="../node_modules/vue-router/dist/vue-router.js"></script>
	</head>
	<body>
		<div id="app"></div>
		<script>
			// 声明组件
			var Fe={
				template:`
				 <div>我是前端</div>
				`
			}
			var Be={
				template:`
				<div>我是后端</div>
				`
			}
			<!-- //创建路由对象 -->
			var router=new VueRouter({
			  routes:[
				{path:"/frontEnd",
				 component:Fe
				},
				{path:"/backEnd",
				 component:Be
				}
			   ]
			})
			var App={
				template:`
				<div>
					<!-- router被渲染成a元素，to渲染成href属性 -->
					<router-link to="/frontEnd">前端</router-link>
					<router-link to="/backEnd">后端</router-link>
					<!-- //路由的试图 -->
					<router-view></router-view>
				</div>
				`
			}
			//router挂载到实例上
			new Vue({
				el:"#app",
				router,
				template:`
				<App/>
				`,
				components:{
					App
				}
			})
		</script>
	</body>
</html>
posted @ 2019-04-18 10:00  lxystar  阅读(517)  评论(0)  编辑  收藏  举报