Vue初学——路由3.路由的嵌套和路由的命名以及由路由的命名实现标准布局

最新推荐文章于 2024-06-17 11:14:39 发布

尖兵果子

最新推荐文章于 2024-06-17 11:14:39 发布

阅读量903

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/wfy17030212/article/details/122347408

版权

VueRouter 路由嵌套命名路由组件布局前端开发

关键词由CSDN通过智能技术生成

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章目录

前言
- 路由的嵌套
- 路由的命名实现标准布局
总结

前言

在浏览网页时，我们常常会看到这样的许多URL，这其实就会让我们意识到，这个html文件是在组件这个文件夹下面的一个子文件,同样，我们也希望在设计登录界面时，能由一个主页(假设URL为/account)，点击登录按钮(假设URL为/login)后，URL变成/account/login,这样用VueRouter该怎么实现呢？

在这里插入图片描述

VueRouter提供了children这样一个属性来实现路由的嵌套

路由的嵌套

其实就是在配置一个路由规则的基础上，加上children这个参数，那子路由肯定不止一个，因此children这个值应该时数组的形式，在其中包含两个子路由。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../../vue.js" type="text/javascript"></script>
		<script src="../../vue-router.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="app">
			
			<router-view></router-view>
		</div>
	</body>
	
	<template id='temp1'>
		<div>
			<h1>account</h1>			
			<router-link to="/account/login">登录</router-link>
			<router-link to="/account/register">注册</router-link>
			
			<router-view></router-view>
		</div>
	</template>
	
	<script type="text/javascript">
		
		let account={
			template:'#temp1'			
		}
		
		let login={
			template:'<h1>login</h1>'
		}
		
		let register={
			template:'<h1>register</h1>'
		}
		
		let router=new VueRouter({
			routes:[
				{
					path:'/account',component:account,
					children:[
						{path:'login',component:login},
						{path:'register',component:register}
					]
				}
			]
		})
		
		let vm=new Vue({
			el:'#app',
			data:{
				
			},
			methods:{
				
			},
			router
		})
	</script>
</html>

路由的命名实现标准布局

路由是可以给定对应的名字的，因此，如果想要测试路由是否能通过命名来实现不同的页面，从而实现如下的布局

在这里插入图片描述

这里VueRouter给定了routes属性，也就是路由规则中的components属性。

	let header={
		template:'<h1 class="myheader">Header头部区域</h1>'
	}
		
	let left={
		template:'<h1 class="myleft">left侧边栏区域</h1>'
	}
	
	let mainbox={
		template:'<h1 class="mymain">mainbox主体区域</h1>'
	}
	
	let router=new VueRouter({
	routes:[
		{
			path:'/',components:{
				'default':header,
				'left':left,
				'main':mainbox
			}
		}
	]
})

这里指定的各种组件的名字，例如左边组件的left，对应的到router-view中就是卸载name属性中的，main也是同理

<div id="app">			
	<router-view></router-view>
	<div class="box">
		<router-view name="left"></router-view>
		<router-view name="main"></router-view>
	</div>
</div>