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

最新推荐文章于 2024-05-28 01:18:35 发布
最新推荐文章于 2024-05-28 01:18:35 发布
阅读量1.6k 收藏 2
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CWH0908/article/details/93200599
版权

本来一个页面里面只能有一个路由视图 对应 一个组件，现在可以多个路由视图（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>

 

 

 

友人C君~
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue3-31-路由-RouterView的name属性的作用
northcastle的博客
12-29 1669
vue3 中 路由 的 指定name属性，实现 一个路由渲染多个组件
Vue Router基础使用(命名路由，命名视图，路由传参)
阳光下的冷静的博客
06-19 5459
命名路由 命名路由，顾名思义，就是给生成的路由URL通过一个名称来标识。因此在 Vue Router 中，我们可以在创建Router 实例的时候，通过在routes配置中给某个路由设置名称，从而方便的调用路由。 const router = new VueRouter({ routes: [ { path: '/form', name: 'form', ...
router-view的name属性 ＜router-view name=“path“＞＜/router-view＞
weixin_66591252的博客
08-23 3758
一个页面可以配置多个router-view，加上name属性使之区分，在路由配置中需要将。变为components，代码如下。
【Vue.js进阶】2、Vue Router：构建单页应用的路由系统
最新发布
weixin_52938153的博客
05-28 908
Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架，在 2014 年创建，设计理念是自底向上增量开发，核心库主要关注视图层，易于上手且可轻松与其他库或项目集成。Vue.js 提供直观的 API 和优雅的编程模型，组件系统允许开发者将应用程序拆分为可复用的独立组件，单文件组件 (SFC) 格式进一步简化了开发流程。Vue.js 拥有强大的生态系统，包括 Vue Router（用于单页应用路由）、Vuex（用于状态管理）和 Vue CLI（提供项目脚手架和构建工具）
Vue：关于router-view的命名视图、传参、自定义事件
Litt_White的博客
04-03 2979
目前根据项目要求，需要实现这么一个需求：（1）一级目录在顶部，二级目录在侧边，右边是main主要内容（2）main主要内容包含：固定的地图组件，以及left，bottom，right组件（3）left，bottom，right组件根据二级菜单的点击，是可变的，（4）在二级菜单中可能会使用同一地图组件（保活），也可能不会展示地图组件（5）left，bottom，right组件要实现跟地图组件的通信。
router-view 属性介绍
热门推荐
秋来九月八
11-09 2万+
router-view 是 Vue Router 提供的用于显示当前路由组件的组件。它是 Vue Router 的核心组件之一，用于将路由视图与 Vue 应用程序的路由系统关联起来。name属性name属性用来渲染特定组件在路由的js中必须进行相应的配置，才能生效routes: [})根据以上的配置，当radio路由被激活的时候，上面两个标签将会分别渲染Radio1和Radio2这两个组件当路由router没有被激活的时候，这两个标签就不会生效除了 name 属性，通常情况下， 不需要其他属性。
vue-router的routes中name属性作用详解
m0_60237095的博客
08-16 6783
我们常用vue.js和vue-router来创建单页应用，vue-router能很方便的管理所有的单页组件。我们在定义每个路由的时候会有一个name的属性（如下面代码），通常我们不定义这个属性发现也没有任何问题，那么这个name到底有什么用呢？ export default new Router({ mode: 'history', routes: [ { path: '/', name: 'Hello', component: Hello ...
讲解vue-router之命名路由和命名视图
08-27
讲解Vue-Router之命名路由和命名视图 Vue-Router是一款功能强大且灵活的路由管理工具，作为一个优秀的前端开发框架，Vue.js提供了非常丰富的路由管理机制。在实际开发中，我们经常需要使用命名路由和命名视图来实现...
详解vue-router 命名路由和命名视图
08-27
Vue-Router 命名路由和命名视图详解 Vue-Router 是一个流行的前端路由库，它提供了许多强大的功能来帮助我们管理应用程序的路由。其中，命名路由和命名视图是两个非常重要的概念，本文将详细介绍这两个概念的实现和...
vue 中 命名视图的用法实例详解
12-08
总结起来，Vue Router 的命名视图功能使得我们可以在一个页面上并行地展示多个组件，这对于创建复杂的布局，如包含侧边栏和主要内容区域的页面特别有用。通过在路由配置中使用 `components` 对象，我们可以为每个...
说说Vue-Router和Vue组件中的name属性的使用区别
青春木鱼的博客
12-10 3293
Vue和Vue-Router中的name没有直接联系，是两个不同的概念！
vue 使用命名视图实现经典布局-------components里面传对象-----router-view里面增加name属性
qq_42039912的博客
07-18 710
<!DOCTYPE html> <html lang="zh-CN"> <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&g.
VueRouter(自定义VueRourter、使用方法、router-view\link、传递参数、路由嵌套、重定向、路由拦截（全局和局部守卫）、命名路由、路由模式（原理）、路由懒加载）
AIWWY的博客
06-01 2240
目录 VueRouter(router) VueRouter引入链接 使用方法 router-view标签 name属性（命名视图） router-link标签 传递参数形式 嵌套路由 重定向 路由拦截 全局前置守卫 全局后置钩子 局部守卫 命名路由 路由模式（history） 路由原理 路由懒加载 VueRouter(router) 和v-if/v-show一样，是用来切换组件的显示，Vue Router是通过哈希来切换（#/xxx），且能够在切换的时候传递参数。注意
router 的name属性，重定向，传参
code_J的博客
04-27 573
name属性 绑定组件 通过name属性，为一个页面中不同的router-view渲染不同的组件,如：将上面代码的Hello渲染在 name为Hello的router-view中，将text渲染在name为text的router-view中。不设置name的将为默认的渲染组件。 <router-view name="Hello"></router-view> //将渲染Hello组件 <router-view name="text"></router-v
一个项目两个router-view
haohaoxueqd的博客
11-04 360
多个router-view
Vue知识整理，专题之路由：8、路由-命名视图实现经典布局（放多个路由组件、实现多视图）
鲁迷那的专栏—坚持实践后再写出来！
03-30 1005
一、前言 上一篇文章我们介绍了路由-使用children属性实现路由嵌套，详细可参考博文：原创Vue笔记整理，专题之路由：7、路由-使用children属性实现路由嵌套，这篇文章我们将介绍：路由-命名视图实现经典布局。 二、路由-命名视图实现经典布局 正在更新中。。。 ......
Vue Router【详解】含路由配置、路由定义、路由跳转、路由传参、自动注册路由、路由守卫、页面滚动、监听路由、$route、$router、路由过渡动画等
朝阳39的博客
06-02 3569
路由模式 默认 hash 模式（url上有/#） —— 使用 URL 的 hash 来模拟一个完整的 URL，当 URL 改变时，页面不会重新加载。 可以改为history 模式 ，但需要后端配合，详见https://router.vuejs.org/zh/guide/essentials/history-mode.html#后端配置例子 回退到上一路由（返回按钮） goBack() { window.history.length > 1 ? this.$ro...
VUE包含多个router-view解决办法
爱coding的大尾巴的专栏
07-05 9774
如果一个页面有多个router-view，加载时会重复加载接口。解决这个问题，可使用以下方式：1，将router-view加入name属性。 2，路由规则里面加入 components，使router-view加入name属性与页面对应。 3，将JS点击事件对应到路由规则的name属性 这样，每次tab切换加载页面时，只加载对应页面的接口。......
【Vue.js】项目中 router-view 可以有几个？
day day up
06-26 2984
在 Vue 项目中，router-view是一个用于渲染路由组件的组件。在一个应用程序中，可以多次使用router-view，以渲染多个不同的路由组件。
vue路由的命名视图
09-08
Vue 路由的命名视图是指在路由配置中给每个视图取一个名字，以便在组件中进行引用和使用。通过命名视图，我们可以在同一个路由路径下渲染多个组件。 在 Vue 路由中，可以通过在路由配置对象中使用 `components` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值