diff --git a/src/store/getters.js b/src/store/getters.js index 4677e6d61798c84ade09d433e9e55f32dfe093ed..4497ba44db555d69eefc36914256ba66091f5b1d 100644 --- a/src/store/getters.js +++ b/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, diff --git a/src/store/modules/app.js b/src/store/modules/app.js index 83049ff589d97d0877224f481490884ddfa95766..e30ae3bfd92e27719859d568e1b34d7c7da2985a 100644 --- a/src/store/modules/app.js +++ b/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) } } }; diff --git a/src/views/layout/Levelbar.vue b/src/views/layout/Levelbar.vue index cb40084db89b5ebbfd306102e36a58fdf2397f37..af850ff8af0f4a096efbede0bde501d6a5361bee 100644 --- a/src/views/layout/Levelbar.vue +++ b/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>