页面子路由

1.新建HomeMessgae.vue与HomeNews.vue页面

<template>
    <div>
       <ul>
          <li>消息1</li>
          <li>消息1</li>
          <li>消息1</li>
          <li>消息1</li>
          <li>消息1</li>
        
       </ul>
    </div>

<template>
    <div>
       <ul>
          <li>Message1</li>
          <li>Message1</li>
          <li>Message1</li>
          <li>Message1</li>
          <li>Message1</li>
​
       </ul>
    </div>
</template>

2.index.js页面

导入这两个页面(懒加载形式)

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

因为在home页面下显示这两个子页面，所以在home页面映射规则中添加chiledren映射,这里还配置了子页面的路由重定向为news页

 {
    path: '/home',
    component: Home,    //这里的是component挂载
    children:[
      {
        path:'',
        redirect:'news'
      },
        {
          path:'news',
          component:HomeNews
        },
        {
          path:'message',
          component:HomeMessage
        }
    ]
  },

3.home页面添加路由router-link与占位符router-view，注意路由需要/home/news反斜杠

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