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

系统文件构成目录：

其中Index.vue是主页。核心源码如下：

      <!--左侧导航栏-->
      <div class="menu">
        <slider-menu></slider-menu>
      </div>
      <!--主体内容部分-->
      <div class="main">
        <router-view></router-view>
      </div>

import sliderMenu from '../components/common/sliderMenu'

sliderMenu.vue 组件核心源码：

<template>
  <div>
    <el-menu
      :default-openeds="['1', '2']"
      :default-active="onRoutes"
      collapse-transition>
      <el-submenu index="1">
        <template slot="title">
          <i class="iconfont icon-add_light"></i>
          <a>新建</a>
        </template>
        <el-menu-item index="New">
          <router-link to="New" target="_blank">出入库单</router-link>
        </el-menu-item>
        <el-menu-item index="NewLending">
          <router-link to="NewLending" target="_blank">产品借出单</router-link>
        </el-menu-item>
        <el-menu-item index="NewReturn">
          <router-link to="NewReturn" target="_blank">产品返回单</router-link>
        </el-menu-item>
        <el-menu-item index="PriceAdjustmentList">
          <router-link to="PriceAdjustmentList" target="_blank">存货调价单</router-link>
        </el-menu-item>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">
          <i class="iconfont icon-search"></i>
          <span>查询</span>
        </template>
        <el-menu-item index="InOrOutList">
          <router-link to="InOrOutList" target="_blank">出入库单</router-link>
        </el-menu-item>
        <el-menu-item index="InvoicingSummary">
          <router-link to="InvoicingSummary" target="_blank">进销存汇总表</router-link>
        </el-menu-item>
        <el-menu-item index="ProductInventory">
          <router-link to="ProductInventory" target="_blank">产品出入库记录</router-link>
        </el-menu-item>
        <el-menu-item index="CompanyAssets">
          <router-link to="CompanyAssets" target="_blank">公司资产表</router-link>
        </el-menu-item>
        <el-menu-item index="LendingTable">
          <router-link to="LendingTable" target="_blank">产品借出表</router-link>
        </el-menu-item>
        <el-menu-item index="ReturnTable">
          <router-link to="ReturnTable" target="_blank">产品返回表</router-link>
        </el-menu-item>
        <el-menu-item index="NewPriceAdjustment">
          <router-link to="NewPriceAdjustment" target="_blank">存货调价单</router-link>
        </el-menu-item>
      </el-submenu>
      <el-menu-item index="Review">
        <i class="iconfont icon-profilefill"></i>
        <router-link to="Review" target="_blank">审核出入库单</router-link>
        <!--<router-link to=''>审核出入库单</router-link>-->
      </el-menu-item>
      <el-menu-item index="ManagementMaterialBoard">
        <i class="iconfont icon-form_light"></i>
        <router-link to="ManagementMaterialBoard" target="_blank">管理材料板信息</router-link>
      </el-menu-item>
      <el-menu-item index="OperationLog">
        <i class="iconfont icon-repair"></i>
        <router-link to="OperationLog" target="_blank">查看操作日志</router-link>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'sliderMenu',
  data () {
    return {}
  },
  mounted () {},
  computed: {
    onRoutes () {
      // 当前激活菜单的 index
      let index = this.$route.path.replace('/', '')
      let title = this.$route.meta.title
      // 改变浏览器title
      document.title = title
      return index
    }
  },
  methods: {}
}
</script>

<style scoped>
  /*改变router-link样式*/
  a {
    text-decoration: none;
    color: inherit;
  }
  .el-submenu .el-menu-item a {
    position: absolute;
    height: 100%;
    width: calc(100% - 50px);
    left: 0;
    padding-left: 50px;
  }
  .el-menu-item a {
    position: absolute;
    height: 100%;
    width: calc(100% - 60px);
    left: 0;
    padding-left: 60px;
  }
</style>

路由配置文件（router文件夹下index.js）源码如下：

import Vue from 'vue'
import Router from 'vue-router'
import Login from '../components/Login'
import Index from '../components/Index'

Vue.use(Router)

export default new Router({
  // mode: 'history',
  routes: [
    // 定义的初始路由路径
    {
      path: '/',
      name: 'Login',
      component: Login,
      meta: {title: '登录'}
    },
    {
      path: '/Index',
      name: 'Index',
      component: Index,
      meta: {title: '主页'},
      children: [
        {
          path: '/New',
          component: resolve => require(['../components/new/New.vue'], resolve),
          meta: {title: '新建__出入库单'}
        },
        {
          path: '/NewLending',
          component: resolve => require(['../components/new/NewLending.vue'], resolve),
          meta: {title: '新建__产品借出单'}
        },
        {
          path: '/NewReturn',
          component: resolve => require(['../components/new/NewReturn.vue'], resolve),
          meta: {title: '新建__产品返回单'}
        },
        {
          path: '/PriceAdjustmentList',
          component: resolve => require(['../components/new/NewPriceAdjustment.vue'], resolve),
          meta: {title: '新建__存货调价单'}
        },
        {
          path: '/InOrOutList',
          component: resolve => require(['../components/open/InOrOutList.vue'], resolve),
          meta: {title: '查询__出入库单'}
        },
        {
          path: '/InvoicingSummary',
          component: resolve => require(['../components/open/InvoicingSummary.vue'], resolve),
          meta: {title: '查询__进销存汇总表'}
        },
        {
          path: '/ProductInventory',
          component: resolve => require(['../components/open/ProductInventory.vue'], resolve),
          meta: {title: '查询__产品出入库记录'}
        },
        {
          path: '/CompanyAssets',
          component: resolve => require(['../components/open/CompanyAssets.vue'], resolve),
          meta: {title: '查询__公司资产表'}
        },
        {
          path: '/LendingTable',
          component: resolve => require(['../components/open/LendingTable.vue'], resolve),
          meta: {title: '查询__产品借出表'}
        },
        {
          path: '/ReturnTable',
          component: resolve => require(['../components/open/ReturnTable.vue'], resolve),
          meta: {title: '查询__产品返回表'}
        },
        {
          path: '/NewPriceAdjustment',
          component: resolve => require(['../components/open/PriceAdjustmentList.vue'], resolve),
          meta: {title: '查询__存货调价单'}
        },
        {
          path: '/Review',
          component: resolve => require(['../components/Review.vue'], resolve),
          meta: {title: '审核出入库单'}
        },
        {
          path: '/ManagementMaterialBoard',
          component: resolve => require(['../components/ManagementMaterialBoard.vue'], resolve),
          meta: {title: '管理材料板信息'}
        },
        {
          path: '/OperationLog',
          component: resolve => require(['../components/OperationLog.vue'], resolve),
          meta: {title: '查看操作日志'}
        }
      ]
    }
  ]
})