嵌套路由

比如在home页面中，希望通过/home/news及/home/message访问一些内容
一个路径映射一个组件，访问这两个路径也会分别渲染两个组件

实现嵌套路由有两个步骤：
1.创建对应的子组件，并且在路由映射中配置对应的子路由
2.在组件内部使用标签
路由配置：

  {
    path: '/home',
    name: 'Home',
    component: Home,
    children: [{
      path: 'news',
      component: () => import("../components/HomeNews.vue")
    },{
      path: 'message',
      component: () => import("../components/HomeMessage.vue")
    }]
  }

注：子路由中路径前加/表示从根路径开始，比如子路由路径设置为/news，name对应组件的匹配路径直接变为/news，不会拼接主路由的路径；子路由开头没有/时，在生成路由时，主路由的path会自动加载子路由之前，同时自动补充/
父组件(home)：

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <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>

嵌套路由

原文：https://www.cnblogs.com/kanaliya/p/12340294.html