vue3+tdesign中的 Menu 导航双层菜单导航，并且菜单进行路由跳转

在Vue 3结合TDesign的UI组件库中，实现一个双层菜单导航并进行路由跳转，可以通过使用`TMenu`组件来构建菜单的结构，并利用Vue Router进行页面之间的跳转。以下是实现该功能的基本步骤和代码示例：

1. 安装并引入TDesign和Vue Router库：
首先确保你的Vue 3项目中已经安装了`tdesign-vue-next`和`vue-router`。

npm install tdesign-vue-next vue-router@4

2. 配置Vue Router：
在你的项目中配置路由，为每个菜单项设置对应的路由路径。

import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  {
    path: '/',
    redirect: '/home',
  },
  {
    path: '/home',
    component: () => import('@/views/Home.vue'),
    meta: { title: '首页' },
  },
  {
    path: '/menu1',
    component: () => import('@/views/Menu1.vue'),
    meta: { title: '菜单1' },
  },
  {
    path: '/menu2',
    component: () => import('@/views/Menu2.vue'),
    meta: { title: '菜单2' },
  },
  // ...其他路由
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

3. 在组件中使用`TMenu`创建双层菜单导航结构：
使用`TMenu`组件构建双层菜单，并通过`v-model`进行选中项的绑定。将`router-link`与`router-view`结合起来使用，实现路由的导航。

<template>
  <td-menu v-model="activeMenu" mode="vertical">
    <td-menu-item index="/home" key="home">
      <router-link to="/home">首页</router-link>
    </td-menu-item>
    <td-menu-item index="/menu1" key="menu1">
      <router-link to="/menu1">菜单1</router-link>
      <td-submenu key="submenu1">
        <template #title>
          <router-link to="/menu1/sub1">子菜单1</router-link>
        </template>
        <td-menu-item key="sub1">
          <router-link to="/menu1/sub1">子菜单1项1</router-link>
        </td-menu-item>
        <td-menu-item key="sub2">
          <router-link to="/menu1/sub2">子菜单1项2</router-link>
        </td-menu-item>
      </td-submenu>
    </td-menu-item>
    <td-menu-item index="/menu2" key="menu2">
      <router-link to="/menu2">菜单2</router-link>
    </td-menu-item>
    <!-- ...其他菜单项 -->
  </td-menu>
  <router-view />
</template>

<script setup>
import { reactive } from 'vue';
import { TMenu, TMenuItem, TSubmenu } from 'tdesign-vue-next';

const activeMenu = reactive({
  key: '',
});

// ...其他逻辑
</script>

4. 确保你的`App.vue`或者相应布局组件中包含了`router-view`来展示路由匹配的组件。

<template>
  <div>
    <!-- 导航菜单区域 -->
    <!-- ...其他布局内容 -->
    <router-view />
  </div>
</template>

<script setup>
// ...相关逻辑
</script>

5. 配置导航守卫（如果需要）：
如果需要在某些路由切换时执行特定逻辑（例如权限控制），可以在Vue Router中配置全局或局部的导航守卫。