Vue-router(路由)的嵌套

路由的嵌套是一个很常见的功能

• 比如在home页面中，我们希望通过/home/news和/home/message访问一些内容。
• 一个路径映射一个组件；访问者两个路径也会分别渲染两个组件。

实现路由嵌套的两个步骤

1、创建两个子组件，并在路由映射中配置对应的子路由

homeMessage.vue文件

<template>
  <div>
    <ul>
      <li>消息1</li>
      <li>消息2</li>
      <li>消息3</li>
      <li>消息4</li>
    </ul>
  </div>
</template>
<script>
</script>
<style>
</style>

homeNews.vue文件

<template>
  <div>
    <ul>
      <li>新闻1</li>
      <li>新闻2</li>
      <li>新闻3</li>
      <li>新闻4</li>
      <li>新闻5</li>
      <li>新闻6</li>
      <li>新闻7</li>
    </ul>
  </div>
</template>
<script>
</script>
<style>
</style>

注：homeNews.vue和homeMessage.vue都是home的子组件，所以最好是在components文件下创建一个home的文件，并将home页面的子组件都放在这个文件下，方便查找和管理；其他页面同理。
配置路由映射

图片.png

2、在组件内部使用<router-link>和<router-view>标签

home.vue文件

<template>
  <div>
    <h2>我是home组件</h2>
    <router-link to="/home/news">新闻</router-link>
    <router-link to="/home/message">消息</router-link>
    <router-view></router-view>
  </div>
</template>
<script>
</script>
<style>
</style>

to的路径必须是完整的路径。

以上就是一个路由嵌套的简单使用了。