Vue路由命名视图及路由组件切换

多路由视图对应多组件的实现

最新推荐文章于 2025-11-05 10:03:14 发布

原创最新推荐文章于 2025-11-05 10:03:14 发布 · 1.8k 阅读

2 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

29 篇文章

订阅专栏

博客介绍了一个页面中多个路由视图对应多个组件的实现方法。包括在routes中用components属性对应路由组件、用children属性添加子组件，以及在template中用router - view容纳子页面组件；还提到在相同html结构中用router - view存放二级页面组件，并给出完整实例代码。

本来一个页面里面只能有一个路由视图对应一个组件，现在可以多个路由视图（router-view）对应多个组件。

载入子页面

在routes中使用components属性，将组件名称及其组件对象包裹，由此可在页面中的router-view标签中添加name属性来对应路由组件，未定义name属性则默认填入default组件
在routes中使用children属性，并传入路由组件对象，可将其作为当前路由页面的子组件，跳转到该路由页面下，原先存在的父路由页面中的组件不会消失。（注意，子组件的path属性不能包括“/”，只需在router-link的to属性中写入完整路径即可）
在当前template标签结构中使用router-view标签来容纳此子页面的组件
				<router-link to='/main_page/children' tag="button">
					载入子页面
				</router-link>
			var router=new VueRouter({
					
					routes:[
						{
							path:"/main_page",
							components:{//匹配路由地址下的名称显示对应组件,注意！！component要加s
								default:header,//default代表默认组件，即在router-view中的name
								'left':leftBox,
								'main':mainBox
							},
							children:[//子页面中的组件
								{path:"children",components:{'son_page':son_page}},//只有组件前有名称，router-view才会渲染对应的路由组件，否则只显示default未命名的
							]
						},
					]
				
			});
		<div id="app">
			
				<router-link to="/main_page">进入主页面</router-link>
				
				<router-view></router-view>
				<router-view name="left"></router-view>
				<router-view name="main"></router-view>
				
		</div>
		
		<template id="mainbox">

			<h1 class='main'>
				主体区域
				
				<router-link to='/main_page/children' tag="button">
					载入子页面
				</router-link>
							
				<router-view name='son_page'></router-view>
			</h1>		
		</template>

载入二级页面

在跟当前路由页面组件相同的html结构中，使用router-view来存放新的二级页面的组件，其余的router-view标签由于没有匹配的路由组件，不会再渲染元素出来。

		<div id="app">
			
				<router-link to="/main_page">进入主页面</router-link>
				
				<router-view></router-view>
				<router-view name="left"></router-view>
				<router-view name="main"></router-view>
				
				<router-view name='second_page'></router-view>
				
		</div>
		
		<template id="mainbox">
			<h1 class='main'>
				主体区域
				
				<router-link to='/main_page/children' tag="button">
					载入子页面
				</router-link>
				
				<router-link to='/main_page/second' tag="button">
					跳转二级页面
				</router-link>
				
				<router-view name='son_page'></router-view>
			</h1>		
		</template>

在routes数组属性中放入二级页面的路由规则

					routes:[
						{
							path:"/main_page",
							components:{//匹配路由地址下的名称显示对应组件,注意！！component要加s
								default:header,//default代表默认组件，即在router-view中的name
								'left':leftBox,
								'main':mainBox
							},
							children:[//子页面中的组件
								{path:"children",components:{'son_page':son_page}},//只有组件前有名称，router-view才会渲染对应的路由组件，否则只显示default未命名的
							]
						},
						{
							path:"/main_page/second",
							components:{//匹配路由地址下的名称显示对应组件,注意！！component要加s
								'second_page':second_page,//二级页面
							}		
						},
					]

完整实例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="../../js/Vue.js" ></script>
		<script src="../../js/vue-router.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.router-link-active{
				color: red;
				font-weight: 800;
			}
			body,html,h1{
				padding: 0;
				margin: 0;
			}
			.header{
				height: 200px;
				background-color: cornflowerblue;
				text-align: center;
				text-align: center;
			}
			.left{
				float: left;
				background-color: darkgray;
				height: 500px;
			}
			.main{
				overflow: hidden;
				height: 500px;
				background-color: yellowgreen;
				text-align: center;
			}
			.son_page{
				height: 200px;
				background-color: navajowhite;
				text-align: center;
				margin-top: 20px;
			}
			.second_page{
				height: 200px;
				background-color: red;
				text-align: center;
			}
			
		</style>
	</head>
	<body>
		
		<div id="app">
			
				<router-link to="/main_page">进入主页面</router-link>
				
				<router-view></router-view>
				<router-view name="left"></router-view>
				<router-view name="main"></router-view>
				
				<router-view name='second_page'></router-view>
				
		</div>
		
		<template id="mainbox">
			<h1 class='main'>
				主体区域
				
				<router-link to='/main_page/children' tag="button">
					载入子页面
				</router-link>
				
				<router-link to='/main_page/second' tag="button">
					跳转二级页面
				</router-link>
				
				<router-view name='son_page'></router-view>
			</h1>		
		</template>
		
		<script>
			
			var header={
				template:"<h1 class='header'>Header头部区域</h1>"
			}
			var leftBox={
				template:"<h1 class='left'>左侧边栏区域</h1>"
			}
			var mainBox={
				template:"#mainbox"
			}
			
			//路由切换，子组件
			var son_page={
				template:"<h1 class='son_page'>子数据</h1>"
			}
			
			//路由切换，第二套组件
			var second_page={
				template:"<h1 class='second_page'>第二个页面的数据</h1>"
			}
			
			var router=new VueRouter({
					
					routes:[
						{
							path:"/main_page",
							components:{//匹配路由地址下的名称显示对应组件,注意！！component要加s
								default:header,//default代表默认组件，即在router-view中的name
								'left':leftBox,
								'main':mainBox
							},
							children:[//子页面中的组件
								{path:"children",components:{'son_page':son_page}},//只有组件前有名称，router-view才会渲染对应的路由组件，否则只显示default未命名的
							]
						},
						{
							path:"/main_page/second",
							components:{//匹配路由地址下的名称显示对应组件,注意！！component要加s
								'second_page':second_page,//二级页面
							}		
						},
					]
				
			});
			
			var vm=new Vue({
				
				el:"#app",
				router:router,
			});
		</script>
	</body>
</html>