split tabs-view to separate files

Author: PanJiaChen

src/views/layout/Levelbar.vue

@@ -4,25 +4,14 @@
       <router-link v-if='item.redirect==="noredirect"||index==levelList.length-1' to="" class="no-redirect">{{item.name}}</router-link>
       <router-link v-else :to="item.path">{{item.name}}</router-link>
     </el-breadcrumb-item>
-    <router-link class="view-tabs" v-for="tag in Array.from(visitedViews)" :to="tag.path" :key="tag.path">
-      <el-tag :closable="true" @close='closeViewTabs(tag,$event)'>
-        {{tag.name}}
-      </el-tag>
-    </router-link>
   </el-breadcrumb>
 </template>
 
 <script>
-
     export default {
       created() {
         this.getBreadcrumb()
       },
-      computed: {
-        visitedViews() {
-          return this.$store.state.app.visitedViews.slice(-6)
-        }
-      },
       data() {
         return {
           levelList: null
@@ -36,18 +25,10 @@
             matched = [{ name: '首页', path: '/' }].concat(matched)
           }
           this.levelList = matched;
-        },
-        closeViewTabs(view, $event) {
-          this.$store.dispatch('delVisitedViews', view)
-          $event.preventDefault()
-        },
-        addViewTabs() {
-          this.$store.dispatch('addVisitedViews', this.$route.matched[this.$route.matched.length - 1])
         }
       },
       watch: {
         $route() {
-          this.addViewTabs();
           this.getBreadcrumb();
         }
       }
@@ -65,7 +46,4 @@
           cursor:text;
         }
     }
-    .view-tabs{
-      margin-left: 10px;
-    }
 </style>

src/views/layout/Navbar.vue

@@ -2,12 +2,13 @@
     <el-menu class="navbar" mode="horizontal">
         <hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
         <levelbar></levelbar>
+        <tabs-view></tabs-view>
         <error-log v-if="log.length>0" class="errLog-container" :logsList="log"></error-log>
         <screenfull class='screenfull'></screenfull>
         <el-dropdown class="avatar-container" trigger="click">
             <div class="avatar-wrapper">
                 <img class="user-avatar" :src="avatar+'?imageView2/1/w/80/h/80'">
-                <i class="el-icon-caret-bottom" />
+                <i class="el-icon-caret-bottom"></i>
             </div>
             <el-dropdown-menu class="user-dropdown" slot="dropdown">
                 <router-link class='inlineBlock' to="/">
@@ -29,6 +30,7 @@
 <script>
     import { mapGetters } from 'vuex';
     import Levelbar from './Levelbar';
+    import TabsView from './TabsView';
     import Hamburger from 'components/Hamburger';
     import Screenfull from 'components/Screenfull';
     import ErrorLog from 'components/ErrLog';
@@ -37,6 +39,7 @@
     export default {
       components: {
         Levelbar,
+        TabsView,
         Hamburger,
         ErrorLog,
         Screenfull

src/views/layout/TabsView.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class='tabs-view-container'>
+    <router-link class="tabs-view" v-for="tag in Array.from(visitedViews)" :to="tag.path" :key="tag.path">
+      <el-tag :closable="true" @close='closeViewTabs(tag,$event)'>
+        {{tag.name}}
+      </el-tag>
+    </router-link>
+    </div>
+</template>
+
+<script>
+    export default {
+      computed: {
+        visitedViews() {
+          return this.$store.state.app.visitedViews.slice(-6)
+        }
+      },
+      methods: {
+        closeViewTabs(view, $event) {
+          this.$store.dispatch('delVisitedViews', view)
+          $event.preventDefault()
+        },
+        addViewTabs() {
+          this.$store.dispatch('addVisitedViews', this.$route.matched[this.$route.matched.length - 1])
+        }
+      },
+      watch: {
+        $route() {
+          this.addViewTabs()
+        }
+      }
+    }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .tabs-view-container{
+    display: inline-block;
+    vertical-align: top;
+    margin-left: 10px;
+    .tabs-view{
+      margin-left: 10px;
+    }
+  }
+
+</style>