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

系统文件构成目录：

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

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

sliderMenu.vue 组件核心源码：

路由配置文件（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: '查看操作日志'}
        }
      ]
    }
  ]
})