vue-router-路由的嵌套使用

嵌套路由是一个很常见的功能
比如在home页面中，希望通过/home/news和Home/message访问一些内容
一个路径映射一个组件，访问者两个路径也会分别渲染这两个组件

路径和组件的关系如下：

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

ul>li{消息$}*4 简便写法

先在components组件文件夹中建两个.vue文件

然后在index.js文件中配置路由，首先用懒加载的方法将两个组件导入

const About = () => import('../components/About')
const User = () => import('../components/User')

再进行配置路由：因为实在home路径下的所以配置在home路由映射中，

{
    path:'/home',
    component:Home,
    children:[
      {
        path:'',
        redirect: 'news'
      },
      {
        path:'news',
        component: HomeNews
      },
      {
        path:'message',
        component: HomeMessage
      }
    ]
  },

news组件和message组件实在home页面中展示的，所以在home页面中使用< router-link >和< router-view >进行展示：在router-link中的路径必须是具体的路径，否则会找不到

<template>
  <div>
    <h2>我是首页</h2>
    <p>我是首页内容</p>

    <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>

<style scoped>

</style>