路由嵌套

新增两个文件

<template>
  <div>
    <ul>
      <li>新闻111</li>
      <li>新闻111</li>
      <li>新闻111</li>
      <li>新闻111</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "HomeNews"
};
</script>

<style>
</style>

 

 

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


<script>
export default {
  name: "HomeMessage"
};
</script>




<style>
</style>

 

router中定义

import Vue from 'vue'
import Router from 'vue-router'
import VueRouter from 'vue-router'

// 路由懒加载
const Home = () => import('@/components/Home')
const About = () => import('@/components/About')
const User = () => import('@/components/User')
const HomeNews = () => import('@/components/HomeNews')
const HomeMessage = () => import('@/components/HomeMessage')

// 导入路由对象
Vue.use(Router)
// 创建VueRouter对象
const routes = [
  {
    // 默认值
    path: '',
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home,
    children: [
      {
        path:'news',
        component:HomeNews
      },
      {
        path:'message',
        component:HomeMessage
      }
    ]
  },
  {
    path: '/about',
    component: About
  },
  {
    path: '/user/:userId',
    component: User
  }
]
// 创建路由和组件之间的映射关系
const router = new VueRouter({
  routes,
  mode: 'history', // 默认是hash模式
  linkActiveClass: 'active' // 激活样式
});

export default router

 

首页加载子组件

<template>
 <div>
     <h1>我是首页</h1>
     <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>



</style>