【Vue学习】vue-router路由嵌套

什么是路由嵌套

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

如何实现路由嵌套

具体步骤为：
1.创建对应的子组件，并且在路由映射中配置对应的子路由

/index.js
const routes = [
{
    path: '',
    //redirect为重定向，表示将path重定向为/home
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home,
    children: [
      {
        path: '',
        redirect: 'news'
      },
      {
        path: 'news',/* 注意子组件不需要加/ */
        component: HomeNews
      },
      {
        path: 'meassage',
        component: HomeMessage
      }
    ]
  },
]

2.在组件内部使用标签

/Home.vue
<template>
  <div>
    <h2>我是首页</h2>
    <P>我是首页内容</P>

    <router-link to="/home/news">新闻</router-link>

    <router-link to="/home/meassage">消息</router-link>
    <router-view></router-view>
    <p>我是首页内容结尾</p>
  </div>
</template>