Vue中router使用命名视图实现经典布局

迈不过友情╰ 2021-10-19 09:20 318阅读 0赞

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>router经典布局</title>
    		<script src="lib/vue.min.js"></script>
    		<script src="lib/vue-router.js"></script>
    		<style>
    			body{
    				margin: 0;
    				padding: 0;
    			}
    			h3{
    				margin: 0;
    				padding: 0;
    			}
    			
    			.headers{
    				width: 100%;
    				height: 80px;
    				background: orange;
    			}
    			.container{
    				display: flex;
    				height: 600px;
    			}
    			.left{
    				background: hotpink;
    				flex: 2;
    			}
    			.main{
    				background: #5BC0DE;
    				flex: 8;
    			}
    		</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>
    		
    		<template id="headers">
    			<h3 class="headers">头部标题</h3>
    		</template>
    		<template id="left">
    			<h3 class="left">左边内容</h3>
    		</template>
    		<template id="main">
    			<h3 class="main">主题内容</h3>
    		</template>
    
    		<script>
    			// 定义模板,要在路由之前!
    			var headers = {
    				template: '#headers'
    			}
    			var leftBox = {
    				template: '#left'
    			}
    			var mainBox = {
    				template: '#main'
    			}
    			
    			// 创建router
    			var router = new VueRouter({
    				routes:[
    					{
    						path:'/',components:{
    							// 设置组件模板
    							'default':headers,
    							'left':leftBox,
    							'main':mainBox
    						}
    					}
    				]
    			})
    			// 实例
    			var app = new Vue({
    				el: '#app',
    				data: {
    
    				},
    				methods: {
    
    				},
    				// 挂载路由
    				router
    			})
    		</script>
    	</body>
    </html>