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

在Vue中使用elementUI的导航菜单NavMenu结合vue-router实现点击链接在新的选项卡中打开界面，可以通过以下步骤实现：

1. 使用NavMenu组件创建导航菜单。
2. 为每个菜单项使用<router-link>标签，并设置target="_blank"属性来确保链接在新的选项卡中打开。
3. 确保vue-router的模式设置为history模式，以支持新选项卡中的路由导航。

以下是一个简单的示例代码：

<template>
  <el-nav-menu default-active="1" @select="handleSelect">
    <el-nav-menu-item index="1" target="_blank">
      <i class="el-icon-location"></i>
      <span slot="title">首页</span>
    </el-nav-menu-item>
    <!-- 其他菜单项 -->
  </el-nav-menu>
</template>
 
<script>
export default {
  methods: {
    handleSelect(key, indexPath) {
      // 可以在这里添加逻辑，比如记录菜单选择等
      this.$router.push(indexPath);
    }
  }
};
</script>

确保你的vue-router配置正确，在router/index.js中：

import Vue from 'vue';
import Router from 'vue-router';
 
Vue.use(Router);
 
export default new Router({
  mode: 'history', // 使用history模式
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    // 其他路由配置
  ]
});

以上代码中，el-nav-menu-item组件的index属性对应的是vue-router中的路由名称或路径，target="_blank"确保了在新的选项卡中打开链接。在handleSelect方法中，我们使用this.$router.push来导航到选中的路由。