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

最新推荐文章于 2022-02-26 11:53:00 发布

haoqi好奇

最新推荐文章于 2022-02-26 11:53:00 发布

阅读量410

点赞数

分类专栏： Vue 案例前端

本文链接：https://blog.csdn.net/qq_41956789/article/details/99828341

版权

前端同时被 3 个专栏收录

45 篇文章 1 订阅

订阅专栏

Vue

29 篇文章 2 订阅

订阅专栏

案例

26 篇文章 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>

haoqi好奇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中router使用命名视图实现经典布局

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>router经典布局</title> <script src="lib/vue.min.js"></script> <script src="lib/vue-...
复制链接

扫一扫