vue3 + elementplus +router 实现无限级侧边栏

实现无限级侧边栏可以使用 Vue Router 中的嵌套路由，以及Element Plus中的菜单组件。具体实现步骤如下：

1. 在 Vue Router 中配置嵌套路由，例如：

const routes = [
  {
    path: '/',
    component: Home,
    children: [
      {
        path: 'about',
        component: About
      },
      {
        path: 'products',
        component: Products,
        children: [
          {
            path: 'category/:categoryId',
            component: Category
          }
        ]
      }
    ]
  }
]

其中，`children` 表示该路由的子路由，可以无限嵌套下去。

2. 在侧边栏中使用 Element Plus 的菜单组件，并使用 `router-link` 标签指定路由。例如：

<el-menu-item index="/about">
  <i class="el-icon-menu"></i>
  <span slot="title">关于我们</span>
</el-menu-item>
<el-submenu index="/products">
  <template slot="title">
    <i class="el-icon-goods"></i>
    <span>产品列表</span>
  </template>
  <el-menu-item
    v-for="category in categories"
    :key="category.id"
    :index="'/products/category/' + category.id"
  >
    {{ category.name }}
  </el-menu-item>
</el-submenu>

其中，`el-menu-item` 和 `el-submenu` 分别表示菜单项和子菜单，`index` 属性指定对应的路由路径，`router-link` 标签会自动为其添加点击事件，点击后会跳转到对应的路由页面。

3. 在路由页面中使用嵌套的 `<router-view>` 标签来显示子路由的内容。例如：

<template>
  <div>
    <h1>产品列表</h1>
    <el-menu
      default-active="/products/category/1"
      class="el-menu-vertical-demo"
      router
    >
      <el-menu-item
        v-for="category in categories"
        :key="category.id"
        :index="'/products/category/' + category.id"
      >
        {{ category.name }}
      </el-menu-item>
    </el-menu>
    <router-view></router-view>
  </div>
</template>

其中，`default-active` 属性指定默认选中的菜单项，`router` 属性指定使用路由模式。

通过以上步骤，即可实现无限级侧边栏。