VUE 命名视图实现经典布局_vue 命名视图的使用场景-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_46179813/article/details/108577016

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
		<script src="js/vue-rotuer-v3.4.3.js"></script>
		
		<style>
			html,body{
				margin: 0;
				padding: 0;
			}
			.header{
				background-color:hotpink;
				height: 100px;
			}
			.container{
				display:flex;
				height: 600px;
			}
			.left{
				background-color:blueviolet;
				flex:2;
				/* float: left;
				width: 50%;
				margin-left: -100px; */
			}
			.main{
				background-color: springgreen;
				flex:8;
				/* width: 50%;
				float: right; */
			}
			
			
			
		</style>
	</head>
	<body>
		<div id="app">
			<router-view></router-view>
			<div class="container">
				<router-view name="left"></router-view>
				<router-view name="main"></router-view>
			</div>
			
		</div>
	</body>
	
		<script>
			var header = {
				template: '<h1 class="header">Header头部区域</h1>'
			}
			
			var leftBox = {
				template:'<h1 class="left">Left侧边栏区域</h1>'
			}
			
			var mainBox = {
				template:'<h1 class="main">mainBox主体区域</h1>'
			}
			
			//创建路由对象
			var router = new VueRouter({
				routes:[
					// { path: '/',component:header },
					// { path: '/left',component:leftBox },
					// { path: '/main',component:mainBox }
					
					{ 
						path: '/',components:{
							'default':header,
							'left':leftBox,
							'main':mainBox
						}
					}
					
				]
			})
			
		var vm = new Vue({
			el:'#app',
			data:{
				
			},
			methods:{
				
			},
			router
		})
	</script>
</html>