vue学习-13-路由02-嵌套路由

嵌套路由

即路由组件又充当一个导航

第一层路由组件
Home:

<template>
	<div>
		<br>
		<router-link to="/Home/News">新闻</router-link> ||
		<router-link to="/Home/message">消息</router-link>
		<router-view></router-view>
	</div>
</template>

<script>
	export default {
		name: 'Home',
	}
</script>
<style>
</style>

第二层路由组件
第二层导航是在第一层基础之上的，第二层的路由写在第一层的路由中：
使用children：添加第二层路由，也就是嵌套路由

路由组件HomeMessage：

<template>
	<div>
		<ul>
			<li>消息一</li>
			<li>消息二</li>
			<li>消息三</li>
		</ul>
	</div>
</template>
<script>
	export default {
		name: 'HomeMessage'
	}
</script>
<style>
</style>

路由组件HomeNews:

<template>
	<div>
		<ul>
			<li>新闻一</li>
			<li>新闻二</li>
			<li>新闻三</li>
		</ul>
	</div>
</template>
<script>
	export default {
		name: 'HomeNews'
	}
</script>
<style>
</style>

const routes = [
	{
		//默认走哪个路由
		path: '/',
		redirect: '/Home'
	},
	{
		path: '/Home',
		name: 'Home',
		component: Home,
		meta: {
			title: '首页'
		},
		children: [
			{
				path: '/',
				redirect: 'News'
			},
			{
				name: 'HomeMessage',
				path: 'message',
				component: Message
			},
			{
				name: 'HomeNews',
				path: 'News',
				component: News
			}
		]
	},
	{
		path: '/about',
		name: 'About',
		component: About,
		//或者使用懒加载方式
		//component: () => import('../components/About.vue')
		meta: {
			title: '关于'
		}
	} 
]

三层路由
将HomeNews和HomeMessage改造一个进行演示即可
改造HomeMessage:

<template>
	<div>
		<ul>
			<li v-for="item in news" :key="item.id">
				<router-link :to="`/Home/message/Detail?id=${item.id}&tittle=${item.tittle}`">{{item.tittle}}</router-link>
			</li>
		</ul>
		<br>
		<router-view></router-view>
	</div>
</template>
<script>
	export default {
		name: 'HomeMessage',
		data() {
			return {
				news: [
					{
						id: 1,
						tittle: '消息标题1'
					},
					{
						id: 2,
						tittle: '消息标题2'
					},
					{
						id: 3,
						tittle: '消息标题3'
					}
				]
			}
		}
	}
</script>
<style>
</style>

Detail路由组件：

<template>
	<div>
		<h3>{{$route.query.id+' '+$route.query.tittle}}</h3>
	</div>
</template>
<script>
	export default {
		name: 'Detail',
	}
</script>
<style>
</style>

配置的三层路由：

	{
		path: '/Home',
		name: 'Home',
		component: Home,
		meta: {
			title: '首页'
		},
		children: [
			{
				path: '/',
				redirect: 'message'
			},
			{
				name: 'HomeMessage',
				path: 'message',
				component: Message,
				children: [
					{
						path: 'Detail',
						name: 'detailName',
						component: Detail
					}
				]
				
			},
			{
				name: 'HomeNews',
				path: 'News',
				component: News
			}
		]
	}

最后route中的name作用，比如这里当有三层路由是：在router-link中写to的路由path时显得很冗长，可以使用name代替path。不过的书写方式有所不同，写成一个对象：

	<router-link :to="{
					//path: '/Home/message/Detail',
					name: 'detailName',
					query: {
						id: item.id,
						tittle: item.tittle
					}
				}">{{item.tittle}}</router-link>