VUE 命名 视图 实现 经典布局

最新推荐文章于 2023-10-21 16:50:31 发布
最新推荐文章于 2023-10-21 16:50:31 发布
阅读量111 收藏
点赞数
分类专栏： VUE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/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>
古雅学长
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue路由实现经典布局
C_MP_的博客
11-20 257
效果图： 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="lib/vue.js"></script> <script src="lib/vue-ro...
vue 中 命名视图的用法实例详解
12-08
总结起来，Vue Router 的命名视图功能使得我们可以在一个页面上并行地展示多个组件，这对于创建复杂的布局，如包含侧边栏和主要内容区域的页面特别有用。通过在路由配置中使用 `components` 对象，我们可以为每个...
vue使用命名视图实现经典布局
u012758488的博客
06-22 322
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do.
命名视图实现经典布局
保持饥渴、好奇
08-14 692
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
Vue系列之 => 命名视图实现经典布局
weixin_30847865的博客
01-03 84
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scal...
路由--命名视图实现经典布局
qweryitao的博客
11-29 118
路由–命名视图实现经典布局 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.staticfile.org/vue/2.6.10/vue.js"&gt...
在Vue中通过vue-router实现命名视图
01-08
例如：创建一个布局 有侧导航和主内容两个视图 此时命名视图就派上用场了 在路由对象中 使用components属性 以使一个路径下可挂载多个子组件： 之后即可为每个要展示的组件指定一个名字 默认name为default 即 不设置...
Vue中通过vue-router实现命名视图的问题
10-15
在上述例子中，我们创建了一个包含头部、左侧边栏和主体内容的布局，每个部分都是一个独立的命名视图。 首先，我们需要创建三个组件：`header`、`leftBox` 和 `mainBox`，并为它们定义模板。然后，我们创建一个新的...
vue-router命名视图的使用讲解
10-17
这时，Vue Router 提供的命名视图功能就显得非常实用。 命名视图的概念是，我们可以在同一个路由配置中定义多个组件，每个组件对应一个特定的 `router-view`，这样就可以在不同位置展示这些组件。如果 `router-view...
路由-命名视图实现经典布局
weixin_34060299的博客
03-01 98
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv...
26-路由命名视图实现经典布局
qq_42138430的博客
03-08 203
26-路由命名视图实现经典布局 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;script src="./lib/vue.js&qu
Vue.js 命名视图实现经典布局
C.
02-25 1555
命名视图实现经典布局 标签代码结构： &amp;lt;div id=&quot;app&quot;&amp;gt; &amp;lt;router-view&amp;gt;&amp;lt;/router-view&amp;gt; &amp;lt;div class=&quot;content&quot;&amp;gt; &amp;lt;router-view name=&am
vue路由实现经典布局案例
qq_44704740的博客
01-14 936
经典布局：header、aside、main。左侧固定，右侧自适应，这里我用的是flex布局 主要是考察css和vue路由 html, body { height: 100%; } * { margin: 0; padding: 0; } #app { height: 100%; overflow: hidden; } .header { height: 100px; back...
vue——38-路由命名视图实现经典布局
肖的博客
10-17 529
css h1, body { margin: 0; padding: 0; } .header { background-color: orange; height: 80px; } .container { ...
vue-router从入门到精通之命名视图（四）
FavoriteStudent的博客
06-27 508
应用场景，当我们想同时展示多个视图，而不是嵌套展示。如：sidebar（侧导航）和main（主内容）两个视图，这个时候命名视图就派上用场了。我们可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果router-view没有设置名字，那么默认为default &lt;router-view class="center"&gt;&lt;/router-view&gt; &l...
Vue 组件和文件及文件夹命名规范、SPA、创建路由、router-link 相关属性、路由建立多视图单页应用
最新发布
qq_73126462的博客
10-21 1292
组件(Component)是Vue最强大的功能之一，组件可以扩展HTML元素，封装可重用的代码组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树组件可以分为全局组件和局部组件组件命名规则短横线命名，如: my-component，vue推荐使用这种方式的命名规则首字母大写命名规则，如：MyComponentpropsprops是父组件用来传递数据的一个自定义属性。
Vue知识整理，专题之路由：8、路由-命名视图实现经典布局（放多个路由组件、实现多视图）
鲁迷那的专栏—坚持实践后再写出来！
03-30 1000
一、前言 上一篇文章我们介绍了路由-使用children属性实现路由嵌套，详细可参考博文：原创Vue笔记整理，专题之路由：7、路由-使用children属性实现路由嵌套，这篇文章我们将介绍：路由-命名视图实现经典布局。 二、路由-命名视图实现经典布局 正在更新中。。。 ......
vue——布局（flex、gride）
热门推荐
wy313622821的博客
09-03 1万+
前端布局发展史： 初代table布局 CSS+div布局 Flex布局（移动端较友好） grid布局（2020年） Flex布局： 实例1用flex布局制作导航栏 flex:1表示下面的综合： flex-grow : 1; // 这意味着div将以与窗口大小相同的比例增长 flex-shrink : 1; // 这意味着div将以与窗口大小相同的比例缩小 flex-basis : 0; // 这意味着div没有这样的起始值，并且将根据可用的屏幕大小占用屏幕。例如： -.
vue路由的命名视图
09-08
Vue 路由的命名视图是指在路由配置中给每个视图取一个名字，以便在组件中进行引用和使用。通过命名视图，我们可以在同一个路由路径下渲染多个组件。 在 Vue 路由中，可以通过在路由配置对象中使用 `components` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值