Vue.js 学习笔记十三：Vue Router 之嵌套路由

目录

嵌套路由

---

嵌套路由

嵌套路由是一个很常见的功能，比如在 home 页面中，我们希望通过 /home/news 和 /home/message 访问一些内容。一个路径映射一个组件， 访问这两个路径也会分别渲染两个组件。

路径和组件的关系如下：

/home/news                     		  /home/message
+------------------+                  +-----------------+
| Home             |                  | Home            |
| +--------------+ |                  | +-------------+ |
| | News         | |  +------------>  | | Message     | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

实现嵌套路由有两个步骤：

• 创建对应的子组件，并且在路由映射中配置对应的子路由。

• 在组件内部使用 <router-view> 标签。

 

定义两个组件：

src/views/news.vue

<template>
	<ul>
		<li>新闻1</li>
		<li>新闻2</li>
		<li>新闻3</li>
	</ul>
</template>

<script>
	export default {
		name: 'News'
	}
</script>

<style>
</style>

src/views/message.vue

<template>
	<ul>
		<li>消息1</li>
		<li>消息2</li>
		<li>消息3</li>
	</ul>
</template>

<script>
	export default {
		name: 'Message'
	}
</script>

<style>
</style>

src/views/home.vue

<template>
	<div>	
		<h2>我是首页的标题</h2>
		<p>我是首页的内容</p>
		<router-link to="/home/news">新闻</router-link> |
		<router-link to="/home/message">消息</router-link>
		<router-view/>
	</div>
</template>

要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置：

src/router/index.js

...
const News = () => import('../views/news')
const Message = () => import('../views/message')
const routes = [
  {
    path: '/home',
    name: 'Home',
    component: Home,
	alias: '/index',
	children: [
         // 当 /home/news 匹配成功，
         // news 会被渲染在 home 的 <router-view> 中
		{
			path: 'news',
			component: News
		},
        // 当 /home/message 匹配成功，
        // message 会被渲染在 home 的 <router-view> 中
		{
			path: 'message',
			component: Message
		}
	]
  }
]
...

嵌套路由也可以配置默认的路径，配置方式如下：

const routes = [
  {
    path: '/home',
    name: 'Home',
    component: Home,
	alias: '/index',
	children: [
		...
         // 当 /home 匹配成功，
         // news 会被渲染在 home 的 <router-view> 中
		{
			path: '',
			component: News
		}
	]
  }
]