标签页

package.json

@@ -24,6 +24,7 @@
     "vue": "^2.6.11",
     "vue-i18n": "^8.26.7",
     "vue-router": "^3.2.0",
+    "vue-router-tab": "^1.2.8",
     "vuex": "^3.4.0"
   },
   "devDependencies": {

src/assets/css/common.less

@@ -8,8 +8,16 @@ ul {
     padding: 0;
 }
 // 自定义滚动条
-::-webkit-scrollbar{width:10px;height:10px}
-::-webkit-scrollbar-button{width:4px;height:0}
+// ::-webkit-scrollbar{width:10px;height:10px}
+// ::-webkit-scrollbar-button{width:4px;height:0}
+// ::-webkit-scrollbar-track{background:0 0}
+// ::-webkit-scrollbar-thumb{background:#dadadb;-webkit-transition:.3s;transition:.3s}
+// ::-webkit-scrollbar-thumb:hover{background-color:#b0b2b3}
+// ::-webkit-scrollbar-thumb:active{background-color:#b0b2b3}
+
+// 隐藏滚动条
+::-webkit-scrollbar{width:0;height:0}
+::-webkit-scrollbar-button{width:0;height:0}
 ::-webkit-scrollbar-track{background:0 0}
 ::-webkit-scrollbar-thumb{background:#dadadb;-webkit-transition:.3s;transition:.3s}
 ::-webkit-scrollbar-thumb:hover{background-color:#b0b2b3}

src/renderer/main.js

@@ -3,6 +3,11 @@ import App from "./App.vue";
 import router from "./router";
 import store from "./store";
 import VueI18n from 'vue-i18n';
+
+// 引入组件和样式
+import RouterTab from 'vue-router-tab'
+import 'vue-router-tab/dist/lib/vue-router-tab.css'
+
 import { Button, Drawer, Message, MessageBox, Row, Col, Form,
   FormItem, Input, Menu, MenuItem, Submenu, Dropdown, DropdownItem, DropdownMenu, Select, Option, Tabs, TabPane, Tree, Upload, Dialog, Breadcrumb, BreadcrumbItem,Loading } from 'element-ui';
 
@@ -10,6 +15,7 @@ import { Button, Drawer, Message, MessageBox, Row, Col, Form,
 Vue.config.productionTip = false;
 if(!process.env.VUE_APP_IS_WEB) Vue.use(require('./vue_electron.js'));
 Vue.use(VueI18n);
+Vue.use(RouterTab)
 
 
 Vue.use(Button);

src/renderer/router/routes.js

 
 import Login from "../views/Account/Login.vue";
-import Layout from '../views/layout/Layout'
+import Layout from '../views/layout/Layout';
+// RouterTab 内置路由
+import { RouterTabRoutes } from 'vue-router-tab'
 
 /**
 * hidden: true                   if `hidden:true` will not show in the sidebar(default is false)
@@ -15,6 +17,7 @@ import Layout from '../views/layout/Layout'
   }
 **/
 
+
 export default [
     { path: '/404', component: () => import('../views/404.vue'), hidden: true },
     {
@@ -22,11 +25,22 @@ export default [
         name: "Home",
         component: Layout,
         redirect: '/home',
-        hidden: false,
-        children: [{
-            path: 'home',
-            name: "Home",
         meta: { title: 'Home', icon: 'example' },
+        hidden: false,
+        children: [
+             // 引入 RouterTab 内置路由以支持 Iframe 页签
+             ...RouterTabRoutes,
+             {
+                path: 'home', // 默认页和父级路由一致
+                name: 'Home',
+                component: () => import('../views/Home.vue'),
+                meta: {
+                  title: 'Home' // 页签标题
+                }
+            },{
+            path: '/others',
+            name: "others",
+            meta: { title: 'others', icon: 'example' },
             component: () => import('../views/Home.vue')
         }]
     },

src/renderer/views/layout/Layout.vue

 <template>
   <div class="app-wrapper" :class="classObj">
-    <sidebar class="sidebar-container" :style="siderbarStyle"></sidebar>
-    <div class="main-container">
-      <navbar></navbar>
+    
+    <!-- <sidebar class="sidebar-container" :style="siderbarStyle"></sidebar> -->
+    
+    <div class="main-container" v-if="is_web">
+      <!-- <navbar></navbar> -->
       <app-main></app-main>
     </div>
+    <router-tab  v-if="!is_web" />
   </div>
 </template>
 
@@ -21,6 +24,9 @@ export default {
   },
   mixins: [ResizeMixin],
   computed: {
+    is_web() {
+      return process.env.VUE_APP_IS_WEB;
+    },
     sidebar() {
       return this.$store.state.app.sidebar
     },
@@ -48,7 +54,27 @@ export default {
   .app-wrapper {
     // @include clearfix;
     position: relative;
-    height: 100%;
+    height: calc(100% - 40px);
     width: 100%;
   }
+  /deep/.router-tab__header {
+    position: fixed;
+    top: 0;
+    margin-left: 150px;
+    z-index: 99;
+    -webkit-app-region: no-drag;
+  }
+  /deep/.router-tab__item.is-active {
+    background-color: #f7f7f9;
+  }
+  /deep/.router-tab__container {
+    // margin-left: 180px;
+  }
+  .hideSidebar /deep/.router-tab__container {
+    // margin-left: 0;
+  }
+  // 不显示首页的关闭
+  /deep/span[title='Home'].router-tab__item-title + .router-tab__item-close{
+    display: none;
+  }
 </style>

yarn.lock

@@ -11617,6 +11617,14 @@ vue-loader@^15.9.2:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-router-tab@^1.2.8:
+  version "1.2.8"
+  resolved "https://registry.npmmirror.com/vue-router-tab/download/vue-router-tab-1.2.8.tgz#5112c27f2069e899bd5dd111090716bffcf3dd10"
+  integrity sha1-URLCfyBp6Jm9XdERCQcWv/zz3RA=
+  dependencies:
+    vue "^2.6.11"
+    vue-router "^3.2.0"
+
 vue-router@^3.2.0:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.5.3.tgz#041048053e336829d05dafacf6a8fb669a2e7999"