vue + elementUI导航组件NavMenu + vue-router实现点击在新的选项卡打开界面

在Vue中使用Element UI的导航组件<el-menu>结合vue-router实现点击菜单项在新的选项卡中打开界面，可以通过监听<el-menu>的menu-item-click事件，并使用JavaScript的window.open函数打开新的标签页。

以下是一个简单的示例：

<template>
  <el-menu
    mode="horizontal"
    @menu-item-click="handleMenuItemClick"
  >
    <el-menu-item index="1">首页</el-menu-item>
    <el-menu-item index="2">关于我们</el-menu-item>
    <!-- 更多菜单项 -->
  </el-menu>
</template>
 
<script>
export default {
  methods: {
    handleMenuItemClick(index, indexPath) {
      // 通过菜单项的index映射到对应的路由路径
      const routePath = `/path-to-${index}`;
      // 使用window.open在新的选项卡中打开路由
      window.open(this.getRouteFullPath(routePath), '_blank');
    },
    getRouteFullPath(routePath) {
      // 构建完整的URL路径，确保正确的基础路径和查询参数
      return `${window.location.origin}${this.$router.options.base}${routePath}`;
    },
  },
};
</script>

在这个示例中，每当一个<el-menu-item>被点击，handleMenuItemClick方法会被触发，然后使用window.open方法打开一个新的浏览器标签页，并导航到与点击的菜单项对应的路由路径。

请注意，这里假设每个菜单项的index属性值与你的Vue-router路由的路径部分相对应，并且你需要根据你的应用配置调整getRouteFullPath方法中的基础路径。