vue 中vue-router路由

投稿人：在云端 2018-03-20

分类 :vue vue1 总分类 :网站阅读 : 0 0条评论

下载vue-router

使用bower下载

先查看版本

bower info vue-router

下载相关的版本

bower install vue-router#0.7.13

简单路由

<script type="text/javascript" src="lib/vue-router.min.js"></script>

<div id="box">
			<!--
            	时间：2018-03-20
            	描述：
            	
            	跳转链接
            	使用a-link进行链接的跳转
            	
            	展示内容
            	<router-view></router-view>
            	
            -->
			<ul>
				<li><a v-link="{path:'/home'}">主页</a></li>
				<li><a v-link="{path:'/news'}">新闻</a></li>
			</ul>
			<!--
            	时间：2018-03-21
            	描述：router-view的div必须放在box的里面，否则不起作用
            -->
			<div>			
				<router-view></router-view>
			</div>
		</div>
		
		<script>
			//准备一个根组件
			var App=Vue.extend();
			
			//Home News组件准备
			var Home=Vue.extend({
				template:'我是主页'
			});
			
			var News=Vue.extend({
				template:'我是新闻'
			});
			
			//准备路由
			var router=new VueRouter();
			//关联
			router.map({
				'home':{
					component:Home
				},
				'news':{
					component:News
				}
			});
			
			//跳转
			//打开后默认显示的页面
			//跳转多个页面可以在后面加","，然后写多个
			router.redirect({
				'/':'/home'
			});
			
			//启动路由
			router.start(App,'#box');
		</script>

复杂的路由

我自己都看着乱~~~

<script type="text/javascript" src="lib/vue-router.min.js"></script>
		
		<style>
			.v-link-active{ color:#1B6D85;}
		</style>
	</head>
	<body>
		
		<div id="box">
			<!--
            	时间：2018-03-20
            	描述：
            	
            	跳转链接
            	使用a-link进行链接的跳转
            	
            	展示内容
            	<router-view></router-view>
            	
            -->
			<ul>
				<li><a v-link="{path:'/home'}">主页</a></li>
				<li><a v-link="{path:'/news'}">新闻</a></li>
			</ul>
			<!--
            	时间：2018-03-21
            	描述：router-view的div必须放在box的里面，否则不起作用
            -->
			<div>			
				<router-view></router-view>
			</div>
		</div>
		
		<template id="home">
			<h3>首页</h3>
			<div>
				<a v-link="{path:'/home/login'}">登陆</a>
				<a v-link="{path:'/home/reg'}">注册</a>
			</div>
			<div>
				<router-view></router-view>
			</div>
		</template>
		
		<template id="news">
			<h3>新闻</h3>
			<div>
				<a v-link="{path:'/news/detail/001'}">新闻001</a>
				<a v-link="{path:'/news/detail/002'}">新闻002</a>
			</div>
			<router-view></router-view>
		</template>
		
		<template id="detail">
			<!--
            	时间：2018-03-27
            	描述：
            	$route.params	当前参数
            	$route.path		当前路径
            	$route.query	数据
            -->
			{{$route.params | json}}<br>
			{{$route.path}}<br>
			{{$route.query | json}}
		</template>
		
		<script>
			//准备一个根组件
			var App=Vue.extend();
			
			//Home News组件准备
			var Home=Vue.extend({
				template:'#home'
			});
			
			var News=Vue.extend({
				template:'#news'
			});
			
			var Detail = Vue.extend({
				template:'#detail'
			})
			
			//准备路由
			var router=new VueRouter();
			//关联
			router.map({
				'home':{
					component:Home,
					subRoutes:{
						'login':{
							component:{
								template:'登陆信息'
							}							
						},
						'reg':{
							component:{
								template:'注册信息'
							}		
						}
					}
				},
				'news':{
					component:News,
					subRoutes:{
						'/detail/:id':{
							component:Detail
						}
					}
				}
			});
			
			//跳转
			//打开后默认显示的页面
			//跳转多个页面可以在后面加","，然后写多个
			router.redirect({
				'/':'/home'
			});
			
			//启动路由
			router.start(App,'#box');
		</script>

下一篇：img中有宽高限制让手机端图片自适应方法

上一篇：vue slot将原标签数据同样保留下来