Vue3全家桶 - VueRouter - 嵌套路由【children】

在Vue3全家桶中，使用VueRouter进行嵌套路由时，可以通过定义路由的children属性来实现。children属性是一个数组，包含了子路由的配置。当访问父路由时，子路由会显示在父路由指定的出口中。

以下是一个简单的例子：

import { createRouter, createWebHistory } from 'vue-router';
 
// 引入子组件
import Home from './components/Home.vue';
import User from './components/User.vue';
import Profile from './components/Profile.vue';
 
// 创建路由实例
const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: Home,
      children: [
        {
          path: 'user',
          component: User,
          children: [
            {
              path: 'profile',
              component: Profile,
            },
          ],
        },
      ],
    },
  ],
});
 
export default router;

在这个例子中，当用户访问/user/profile时，Profile组件会在User组件的内部显示。这就是嵌套路由的基本用法。