系统文件构成目录：
其中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 () {// 当前激活菜单的 indexlet index = this.$route.path.replace('/', '')let title = this.$route.meta.title// 改变浏览器titledocument.title = titlereturn 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: '查看操作日志'}}]}]})
如果觉得《vue + elementUI导航组件NavMenu + vue-router实现点击在新的选项卡打开界面》对你有帮助，请点赞、收藏，并留下你的观点哦！
