<ul class="aside"> <li class="submenu"> <div class="submenu-title" style="color: #2468f2;"> <i class="iconfont icon-components-full"></i> <span>数据中心</span> <i class="iconfont icon-qian"></i> </div> <ul> <li class="menu-item">数据集</li> <li class="menu-item">在线标注</li> <li class="menu-item">标签组管理</li> </ul> </li> <li class="submenu"> <div class="submenu-title"> <i class="iconfont icon-shujumoxing"></i> <span>模型中心</span> <i class="iconfont icon-qian"></i> </div> <ul> <li class="menu-item">我的模型</li> <li class="menu-item">数据集验证</li> </ul> </li> </ul>vue写出点击左边的menu-item，右边呈现对应的div

你可以使用 Vue Router 来实现这个效果。首先，在 Vue 组件中定义一个路由表，其中包含了每个 menu-item 对应的路由路径和对应组件的信息。例如：

// 定义路由表
const routes = [
  { path: '/dataset', component: Dataset },
  { path: '/labeling', component: Labeling },
  { path: '/tag-group', component: TagGroup },
  { path: '/my-models', component: MyModels },
  { path: '/data-validation', component: DataValidation },
];

// 创建路由实例
const router = new VueRouter({
  routes,
});

然后，在你的组件中，使用 `router-link` 标签来渲染每个 menu-item，使得用户可以点击它们来触发路由跳转。例如：

<ul>
  <li><router-link to="/dataset">数据集</router-link></li>
  <li><router-link to="/labeling">在线标注</router-link></li>
  <li><router-link to="/tag-group">标签组管理</router-link></li>
  <li><router-link to="/my-models">我的模型</router-link></li>
  <li><router-link to="/data-validation">数据集验证</router-link></li>
</ul>

最后，在你的组件中，使用 `<router-view>` 标签来渲染对应的组件，使得它会根据当前路由路径来动态渲染不同的组件。例如：

<template>
  <div>
    <ul>
      <!-- 这里是菜单项 -->
    </ul>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

这样，当用户点击某个菜单项时，就会触发路由跳转，同时会根据路由路径动态渲染对应的组件。