vue路由实现经典布局

原创于 2019-11-20 17:15:13 发布 · 308 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何使用Vue.js的路由功能来实现经典的布局设计。通过示例代码，展示了在Vue应用中设置路由、导航和组件间通信的方法，帮助开发者理解并掌握Vue路由的基本用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：
在这里插入图片描述
代码如下：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="lib/vue.js"></script>
		<script src="lib/vue-router.js"></script>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.header{
				background: #FFC0CB;
				height: 100px;
			}
			.box{
				display: flex;
				height: 500px;
			}
			.left{
				background: #ddd;
				flex: 2;
			}
			.main{
				background: #666;
				flex: 8;
			}
		</style>
	</head>
	<body>
		<div id="app">
			
			<router-view></router-view>
			<div class="box">
				<router-view name="left"></router-view>
			  <router-view name="main"></router-view>
			</div>
			
		</div>
		
		<script>
			var header={
				template:'<h1 class="header">这是头部</h1>'
			}
			var leftBox={
				template:'<h1 class="left">这是侧边栏</h1>'
			}
			var mainBox={
				template:'<h1 class="main">这是主体区域</h1>'
			}
			
			var router=new VueRouter({
				routes:[
					{ 
						path:'/',
						components:{
							 'default':header,
							'left':leftBox,
							'main':mainBox
						}
						 
					}
				]
			})
			
			var vm=new Vue({
				el:'#app',
				data:{},
				methods:{},
				router
			})
		</script>
	</body>
</html>