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>