Vue 3 之 嵌套路由

在用Vue 3 构建复杂的单页面应用（SPA）时，需要创建出多层次的页面结构，这时候嵌套路由允许你在一个路由内部定义另一个路由，这非常有用。

1. 定义路由

import { createRouter, createWebHistory } from 'vue-router';  
import UserProfile from '../views/UserProfile.vue';  
import UserPosts from '../views/UserPosts.vue';  
import DefaultComponent from '../views/DefaultComponent.vue'; 
const routes = [
  {
    path: '/user/:id',
    name: 'user', 
    component: User,
    children: [
      {
        // 当 /user/:id 匹配成功
        // defaultComponent 组件 将被渲染到 User 的 <router-view> 内部
        // ---这通常做默认子组件使用，提供一个空的嵌套路径
        path: '',
        name: 'default', 
        component: DefaultComponent,
      },
      {
        // 当 /user/:id/profile 匹配成功
        // UserProfile 将被渲染到 User 的 <router-view> 内部
        path: 'profile',
        name: 'profile',
        component: UserProfile,
      },
      {
        // 当 /user/:id/posts 匹配成功
        // UserPosts 将被渲染到 User 的 <router-view> 内部
        path: 'posts',
        name: 'posts', 
        component: UserPosts,
      },
    ],
  },
]
const router = createRouter({  
  history: createWebHistory(process.env.BASE_URL),  
  routes,  
});  
  
export default router;

2. 在父组件中渲染子路由

<!-- User.vue -->  
<template>  
  <div>  
    <h2>User Page</h2>  
    <p>User ID: {{ $route.params.id }}</p>  
    <nav>  
      <!-- 使用 <router-link> 来创建导航链接-->  
      <router-link to="/user/:id/profile">Profile</router-link>  
      <router-link to="/user/:id/posts">Posts</router-link>  
    </nav>  
    <router-view></router-view> <!-- 这里会渲染子路由的组件 -->  
  </div>  
</template>