路由的嵌套使用

1. 路由的嵌套使用，指的就是在一个组件中嵌套使用一个组件，该组件是子组件
2. 首先创建子组件，并且在index.js文件中使用懒加载，导入该组件，并且在routes中的home组件中添加children属性，添加子组件

const HomeNews = () => import('../components/HomeNews')
const HomeMessage = () => import('../components/HomeMessage')

3. 需要注意的是，添加子组件时的path属性中不需要添加’/’

      {
        // 在子组件中的路径不允许加入'/'
        path: 'news',
        component: HomeNews
      },
      {
        path: 'message',
        component: HomeMessage
      }

4. 在组件文件Home.vue的模板属性中添加子组件

<template>
  <div>
    <h2>这是首页标题</h2>
    <p>这是首页内容1111</p>
    <p>这是首页内容2222</p>
    <!--    显示嵌套的路由组件-->
    <router-link to="/home/news">新闻</router-link>
    <router-link to="/home/message">信息</router-link>
    <router-view></router-view>
  </div>
</template>

5. 实现默认路由的显示，当进入Home页面中默认显示news中的内容，在index.js文件中的children中添加以下信息

      // 默认显示news组件
      {
        path: '',
        redirect: 'news'
      }