Vue-Router之嵌套路由

在路由配置中，配置children

import Vue from 'vue'
import VueRouter from 'vue-router'Vue.use(VueRouter)const router = new VueRouter({mode: 'history',base: import.meta.env.BASE_URL,routes: [{path: '/',redirect: '/home'},{path: '/home',name: 'home',component: () => import('../views/HomeView.vue'),children: [{path: 'news',name: 'news',component: () => import('../views/NewsView.vue'),},{path: 'message',name: 'message',component: () => import('../views/MessageView.vue'),},]},{path: '/about',name: 'about',component: () => import('../views/AboutView.vue')},]
})export default router

在子页面中，继续使用router-link与router-view

<script>
export default {name: "HomeView"
}
</script><template><div class="home-container"><h3>Home组件</h3><router-link to="/home/news">News</router-link><br><router-link to="/home/message">Message</router-link><router-view></router-view></div></template><style scoped>
.home-container {min-height: 150px;background-color: #f2f2f2;padding: 15px;
}</style>