vue49 —— vue-router -- 嵌套路由

嵌套路由：

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

路径和组件的关系：

实现步骤：

• 创建对应的子组件，并且在路由映射中配置对应的子路由
• 在组件内部使用 <router-view> 标签

1. 在src - components 文件夹下新建两个.vue文件，作为子组件
2. Home.vue：

<template>
  <div>
    <h2>我是组件 home</h2>
    <p>。。家是小的国，国是大的家。。</p>
    
    // 注意路径写法 /home/news 。不能省略/home
    <router-link to='/home/news'>新闻</router-link>
    <router-link to='/home/message'>信息</router-link>
    <router-view></router-view>
  
  </div>
</template>

src - router - index.js：

const HomeNews = () => import('../components/HomeNews')
const HomeMessage = () => import('../components/HomeMessage')
...
{
    path:'/home',
    // component: Home 引用后直接使用
    component: () => import('../components/Home'),  // 路由懒加载
    children: [
      { //默认路由
        path: '',   
        redirect: 'news'
      },
      {
        path: 'news',   //不加/， 不能写成 /news
        component: HomeNews 
      },
      {
        path: 'message',
        component: HomeMessage
      }
    ]
  }
 ...