SOURCE

console 命令行工具 X clear 

                    

                        
>

                        
                    

                

            

            
console

            
//创建组件
const Korea=Vue.extend({
	template:'#korea'
});
const korea2=Vue.extend({
	template:'#korea-2'


});
const Chines=Vue.extend({
	template:'#chines'
});

//定义路由
const routes=[
	
	{
		path:'/korea',
		component:Korea,
		children:[
			{path:'korea2',component:korea2}
		]
	
	},
	{path:'/chines',component:Chines},
	{path:'/',redirect:'/korea'}

];
//创建route实例，然后传routes配置
	
	const router=new VueRouter({
		routes:routes
	})
		
//创建和挂载根实例
	const App=new Vue({
		router:router,
		data:{
			imgs1:[
			
		],
		Imgs2:[
			
		],
		
			}
			
	}).$mount('#app');
			


            
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>RunJS</title>
		<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
		<script type="text/javascript" src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
		<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" >
	</head>
	<body>
		<div id="app">
			
			<div class="container">
				<div class="row">
					<h2>
						巨星排行榜
					</h2>
				</div>
				<div class="container">
					<div class="row">
						<div style="width:55%" class="col-md-2">
							<div class="list-group">
								
								<!--使用 router-link 组建来导航-->
								<!--与<a>标签类似，链接跳转作用，只是vue时单页面，<a>标签可以实现页面间跳转，但不可以在单页面内跳转-->
                <!--通过传入 `to` 属性指定链接-->
								
								<router-link class="list-group-item" to="/korea">韩国--Korea</router-link>
								<router-link class="list-group-item" to="/chines">中国--chines</router-link>
							</div>
							<div style="width:97%" class="col-md-12">
								
								 <!--路由出口-->
           			 <!--路由匹配到的组件将渲染在这里-->
							<router-view></router-view>
						
						</div>
						</div>
						
					</div>
				</div>
			</div>
			
			
		</div>
		
		<template id="korea">
			<div>
				<h2>韩国巨星排行榜</h2>
				
					<img src="http://img01.sogoucdn.com/app/a/100520024/2dca236d81c5fc584cbc7c910b9aacf0">
				<img src="http://img04.sogoucdn.com/app/a/100520024/21e8169bbf8612b6e4c194341890a838">
				
			<div class="col-md-0">
				<!--多级嵌套-->
			
			<router-link to='/korea/korea2'><h3>排行榜二</h3></router-link>
			</div>
			<div class="col-md-14">
				<router-view></router-view>
			</div>
	
			</div>
			
		</template>
		<template id="korea-2">
			<div>
			
			<h3>韩国巨星排行榜二</h3>
			<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=525680855,595326312&fm=27&gp=0.jpg">
			
			</div>
		</template>
		<template id="chines">
			<div >
				<h2>中国巨星排行榜</h2>
				<img src="http://img01.sogoucdn.com/app/a/100520024/38b410e1d1e0a78280ef4515196fec3e">
				<img style="" src="http://img04.sogoucdn.com/app/a/100520024/027a2df86f945f052908ad0a8eb5a55d">
				
	
				
		</div>
			</template>
	
		
	</body>
</html>

            
*{
	padding:0;
	margin:0
}
body{
	background:pink;
	
}
div{
	background:#ccc;
}
img{
	width:280px;
	height:400px
}