add view tabs

Author: PanJiaChen

src/store/getters.js

@@ -1,5 +1,6 @@
 const getters = {
   sidebar: state => state.app.sidebar,
+  visitedViews: state => state.app.visitedViews,
   token: state => state.user.token,
   avatar: state => state.user.avatar,
   name: state => state.user.name,

src/store/modules/app.js

@@ -6,7 +6,8 @@ const app = {
       opened: !+Cookies.get('sidebarStatus')
     },
     theme: 'default',
-    livenewsChannels: Cookies.get('livenewsChannels') || '[]'
+    livenewsChannels: Cookies.get('livenewsChannels') || '[]',
+    visitedViews: []
   },
   mutations: {
     TOGGLE_SIDEBAR: state => {
@@ -16,11 +17,25 @@ const app = {
         Cookies.set('sidebarStatus', 0);
       }
       state.sidebar.opened = !state.sidebar.opened;
+    },
+    ADD_VISITED_VIEWS: (state, view) => {
+      if (state.visitedViews.includes(view)) return
+      state.visitedViews.push(view)
+    },
+    DEL_VISITED_VIEWS: (state, view) => {
+      const index = state.visitedViews.indexOf(view)
+      state.visitedViews.splice(index, 1)
     }
   },
   actions: {
     ToggleSideBar: ({ commit }) => {
       commit('TOGGLE_SIDEBAR')
+    },
+    addVisitedViews: ({ commit }, view) => {
+      commit('ADD_VISITED_VIEWS', view)
+    },
+    delVisitedViews: ({ commit }, view) => {
+      commit('DEL_VISITED_VIEWS', view)
     }
   }
 };

src/views/layout/Levelbar.vue

@@ -4,14 +4,25 @@
       <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
@@ -25,10 +36,18 @@
             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();
         }
       }
@@ -46,4 +65,7 @@
           cursor:text;
         }
     }
+    .view-tabs{
+      margin-left: 10px;
+    }
 </style>