vue-admin-template#

前言#
vue-admin-template里面本身是没有TagViews标签页的，只有完整版的vue-element-admin才有，翻找网上的其他教程，要么代码不完整，要么有bug，本篇文章就教大家如何在vue-admin-template的基础上新增TagViews

步骤#

1. 从vue-element-admin复制文件#

新增文件夹\src\layout\components\TagsView，并新建文件index.vue，ScrollPane.vue

index.vue：

1
<template>
2
  <div id="tags-view-container" class="tags-view-container">
3
    <scroll-pane
4
      ref="scrollPane"
5
      class="tags-view-wrapper"
6
      @scroll="handleScroll"
7
    >
8
      <router-link
9
        v-for="tag in visitedViews"
10
        ref="tag"
11
        :key="tag.path"
12
        :class="isActive(tag) ? 'active' : ''"
13
        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
14
        tag="span"
15
        class="tags-view-item"
16
        :style="activeStyle(tag)"
17
        @click.middle.native="!isAffix(tag) ? closeSelectedTag(tag) : ''"
18
        @contextmenu.prevent.native="openMenu(tag, $event)"
19
      >
20
        {{ tag.title }}
21
        <span
22
          v-if="!isAffix(tag)"
23
          class="el-icon-close"
24
          @click.prevent.stop="closeSelectedTag(tag)"
25
        />
26
      </router-link>
27
    </scroll-pane>
28
    <ul
29
      v-show="visible"
30
      :style="{ left: left + 'px', top: top + 'px' }"
31
      class="contextmenu"
32
    >
33
      <!-- <li @click="refreshSelectedTag(selectedTag)">
34
        <i class="el-icon-refresh-right"></i> 刷新页面
35
      </li> -->
36
      <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">
37
        <i class="el-icon-close"></i> 关闭当前
38
      </li>
39
      <li @click="closeOthersTags">
40
        <i class="el-icon-circle-close"></i> 关闭其他
41
      </li>
42
      <li v-if="!isFirstView()" @click="closeLeftTags">
43
        <i class="el-icon-back"></i> 关闭左侧
44
      </li>
45
      <li v-if="!isLastView()" @click="closeRightTags">
46
        <i class="el-icon-right"></i> 关闭右侧
47
      </li>
48
      <li @click="closeAllTags(selectedTag)">
49
        <i class="el-icon-circle-close"></i> 全部关闭
50
      </li>
51
    </ul>
52
  </div>
53
</template>
54

55
<script>
56
import ScrollPane from "./ScrollPane";
57
import path from "path";
58

59
export default {
60
  components: { ScrollPane },
61
  data() {
62
    return {
63
      visible: false,
64
      top: 0,
65
      left: 0,
66
      selectedTag: {},
67
      affixTags: [],
68
    };
69
  },
70
  computed: {
71
    visitedViews() {
72
      return this.$store.state.tagsView.visitedViews;
73
    },
74
    // 没有用到权限验证
75
    // routes() {
76
    // return this.$store.state.permission.routes
77
    // },
78
    theme() {
79
      return this.$store.state.settings.theme;
80
    },
81
  },
82
  watch: {
83
    $route() {
84
      this.addTags();
85
      this.moveToCurrentTag();
86
    },
87
    visible(value) {
88
      if (value) {
89
        document.body.addEventListener("click", this.closeMenu);
90
      } else {
91
        document.body.removeEventListener("click", this.closeMenu);
92
      }
93
    },
94
  },
95
  mounted() {
96
    this.initTags();
97
    this.addTags();
98
     // 刷新页面标签不丢失
99
     this.beforeUnload();
100
  },
101
  methods: {
102
    beforeUnload() {
103
      // 监听页面刷新
104
      window.addEventListener("beforeunload", () => {
105
        // visitedViews数据结构太复杂无法直接JSON.stringify处理，先转换需要的数据
106
        // console.log(this.visitedViews,'this.visitedViews')
107
        let tabViews = this.visitedViews.map((item) => {
108
          return {
109
            fullPath: item.fullPath,
110
            hash: item.hash,
111
            meta: { ...item.meta },
112
            name: item.name,
113
            params: { ...item.params },
114
            path: item.path,
115
            query: { ...item.query },
116
            title: item.title,
117
          };
118
        });
119
        sessionStorage.setItem("tabViews", JSON.stringify(tabViews));
120
      });
121
      // 页面初始化加载判断缓存中是否有数据
122
      let oldViews = JSON.parse(sessionStorage.getItem("tabViews")) || [];
123
      //  console.log(oldViews,'this.visitedViews2')
124
      if (oldViews.length > 0) {
125
        this.$store.state.tagsView.visitedViews = oldViews;
126
      }
127
    },
128
    isActive(route) {
129
      return route.path === this.$route.path;
130
    },
131
    activeStyle(tag) {
132
      if (!this.isActive(tag)) return {};
133
      return {
134
        "background-color": this.theme,
135
        "border-color": this.theme,
136
      };
137
    },
138
    isAffix(tag) {
139
      return tag.meta && tag.meta.affix;
140
    },
141
    isFirstView() {
142
      try {
143
        return (
144
          this.selectedTag.fullPath === this.visitedViews[1].fullPath ||
145
          this.selectedTag.fullPath === "/index"
146
        );
147
      } catch (err) {
148
        return false;
149
      }
150
    },
151
    isLastView() {
152
      try {
153
        return (
154
          this.selectedTag.fullPath ===
155
          this.visitedViews[this.visitedViews.length - 1].fullPath
156
        );
157
      } catch (err) {
158
        return false;
159
      }
160
    },
161
    filterAffixTags(routes, basePath = "/") {
162
      let tags = [];
163
      if (this.routes) {
164
        routes.forEach((route) => {
165
          if (route.meta && route.meta.affix) {
166
            const tagPath = path.resolve(basePath, route.path);
167
            tags.push({
168
              fullPath: tagPath,
169
              path: tagPath,
170
              name: route.name,
171
              meta: { ...route.meta },
172
            });
173
          }
174
          if (route.children) {
175
            const tempTags = this.filterAffixTags(route.children, route.path);
176
            if (tempTags.length >= 1) {
177
              tags = [...tags, ...tempTags];
178
            }
179
          }
180
        });
181
      }
182
      return tags;
183
    },
184
    initTags() {
185
      const affixTags = (this.affixTags = this.filterAffixTags(this.routes));
186
      for (const tag of affixTags) {
187
        // Must have tag name
188
        if (tag.name) {
189
          this.$store.dispatch("tagsView/addVisitedView", tag);
190
        }
191
      }
192
    },
193
    addTags() {
194
      const { name } = this.$route;
195
      if (name) {
196
        this.$store.dispatch("tagsView/addView", this.$route);
197
        if (this.$route.meta.link) {
198
          this.$store.dispatch("tagsView/addIframeView", this.$route);
199
        }
200
      }
201
      return false;
202
    },
203
    moveToCurrentTag() {
204
      const tags = this.$refs.tag;
205
      this.$nextTick(() => {
206
        for (const tag of tags) {
207
          if (tag.to.path === this.$route.path) {
208
            this.$refs.scrollPane.moveToTarget(tag);
209
            // when query is different then update
210
            if (tag.to.fullPath !== this.$route.fullPath) {
211
              this.$store.dispatch("tagsView/updateVisitedView", this.$route);
212
            }
213
            break;
214
          }
215
        }
216
      });
217
    },
218
    refreshSelectedTag(view) {
219
      this.$tab.refreshPage(view);
220
      // if (this.$route.meta.link) {
221
        this.$store.dispatch("tagsView/delIframeView", this.$route).then((res)=>{
222
          console.log(res);
223
          console.log(view);
224
          const {fullPath}=view;
225
          this.$nextTick(()=>{
226
            this.$router.replace({
227
              path:'/redirect'+fullPath
228
            })
229
          })
230
        });
231
      // }
232
    },
233
    closeSelectedTag(view) {
234
      this.$tab.closePage(view).then(({ visitedViews }) => {
235
        if (this.isActive(view)) {
236
          this.toLastView(visitedViews, view);
237
        }
238
      });
239
    },
240
    closeRightTags() {
241
      this.$tab.closeRightPage(this.selectedTag).then((visitedViews) => {
242
        if (!visitedViews.find((i) => i.fullPath === this.$route.fullPath)) {
243
          this.toLastView(visitedViews);
244
        }
245
      });
246
    },
247
    closeLeftTags() {
248
      this.$tab.closeLeftPage(this.selectedTag).then((visitedViews) => {
249
        if (!visitedViews.find((i) => i.fullPath === this.$route.fullPath)) {
250
          this.toLastView(visitedViews);
251
        }
252
      });
253
    },
254
    closeOthersTags() {
255
      console.log('关闭其他标签');
256
      // this.$router.push(this.selectedTag).catch(() => {});
257
      this.$router.push(this.selectedTag);
258
      this.$tab.closeOtherPage(this.selectedTag).then(() => {
259
        this.moveToCurrentTag();
260
      }).catch(() => {});
261
    },
262
    closeAllTags(view) {
263
      this.$tab.closeAllPage().then(({ visitedViews }) => {
264
        if (this.affixTags.some((tag) => tag.path === this.$route.path)) {
265
          return;
266
        }
267
        this.toLastView(visitedViews, view);
268
      });
269
    },
270
    toLastView(visitedViews, view) {
271
      const latestView = visitedViews.slice(-1)[0];
272
      if (latestView) {
273
        this.$router.push(latestView.fullPath);
274
      } else {
275
        // now the default is to redirect to the home page if there is no tags-view,
276
        // you can adjust it according to your needs.
277
        if (view.name === "Dashboard") {
278
          // to reload home page
279
          this.$router.replace({ path: "/redirect" + view.fullPath });
280
        } else {
281
          this.$router.push("/");
282
        }
283
      }
284
    },
285
    openMenu(tag, e) {
286
      const menuMinWidth = 105;
287
      const offsetLeft = this.$el.getBoundingClientRect().left; // container margin left
288
      const offsetWidth = this.$el.offsetWidth; // container width
289
      const maxLeft = offsetWidth - menuMinWidth; // left boundary
290
      const left = e.clientX - offsetLeft + 15; // 15: margin right
291

292
      if (left > maxLeft) {
293
        this.left = maxLeft;
294
      } else {
295
        this.left = left;
296
      }
297

298
      this.top = e.clientY;
299
      this.visible = true;
300
      this.selectedTag = tag;
301
    },
302
    closeMenu() {
303
      this.visible = false;
304
    },
305
    handleScroll() {
306
      this.closeMenu();
307
    },
308
  },
309
};
310
</script>
311

312
<style lang="scss" scoped>
313
.tags-view-container {
314
  height: 34px;
315
  width: 100%;
316
  background: #fff;
317
  border-bottom: 1px solid #d8dce5;
318
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
319
  .tags-view-wrapper {
320
    .tags-view-item {
321
      display: inline-block;
322
      position: relative;
323
      cursor: pointer;
324
      height: 26px;
325
      line-height: 26px;
326
      border: 1px solid #d8dce5;
327
      color: #495060;
328
      background: #fff;
329
      padding: 0 8px;
330
      font-size: 12px;
331
      margin-left: 5px;
332
      margin-top: 4px;
333
      &:first-of-type {
334
        margin-left: 15px;
335
      }
336
      &:last-of-type {
337
        margin-right: 15px;
338
      }
339
      &.active {
340
        background-color: #42b983;
341
        color: #fff;
342
        border-color: #42b983;
343
        &::before {
344
          content: "";
345
          background: #fff;
346
          display: inline-block;
347
          width: 8px;
348
          height: 8px;
349
          border-radius: 50%;
350
          position: relative;
351
          margin-right: 2px;
352
        }
353
      }
354
    }
355
  }
356
  .contextmenu {
357
    margin: 0;
358
    background: #fff;
359
    z-index: 3000;
360
    position: absolute;
361
    list-style-type: none;
362
    padding: 5px 0;
363
    border-radius: 4px;
364
    font-size: 12px;
365
    font-weight: 400;
366
    color: #333;
367
    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
368
    li {
369
      margin: 0;
370
      padding: 7px 16px;
371
      cursor: pointer;
372
      &:hover {
373
        background: #eee;
374
      }
375
    }
376
  }
377
}
378
</style>
379

380
<style lang="scss">
381
//reset element css of el-icon-close
382
.tags-view-wrapper {
383
  .tags-view-item {
384
    .el-icon-close {
385
      width: 16px;
386
      height: 16px;
387
      vertical-align: 2px;
388
      border-radius: 50%;
389
      text-align: center;
390
      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
391
      transform-origin: 100% 50%;
392
      &:before {
393
        transform: scale(0.6);
394
        display: inline-block;
395
        vertical-align: -3px;
396
      }
397
      &:hover {
398
        background-color: #b4bccc;
399
        color: #fff;
400
      }
401
    }
402
  }
403
}
404
</style>

ScrollPane.vue

1
<template>
2
  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
3
    <slot />
4
  </el-scrollbar>
5
</template>
6

7
<script>
8
const tagAndTagSpacing = 4 // tagAndTagSpacing
9

10
export default {
11
  name: 'ScrollPane',
12
  data() {
13
    return {
14
      left: 0
15
    }
16
  },
17
  computed: {
18
    scrollWrapper() {
19
      return this.$refs.scrollContainer.$refs.wrap
20
    }
21
  },
22
  mounted() {
23
    this.scrollWrapper.addEventListener('scroll', this.emitScroll, true)
24
  },
25
  beforeDestroy() {
26
    this.scrollWrapper.removeEventListener('scroll', this.emitScroll)
27
  },
28
  methods: {
29
    handleScroll(e) {
30
      const eventDelta = e.wheelDelta || -e.deltaY * 40
31
      const $scrollWrapper = this.scrollWrapper
32
      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
33
    },
34
    emitScroll() {
35
      this.$emit('scroll')
36
    },
37
    moveToTarget(currentTag) {
38
      const $container = this.$refs.scrollContainer.$el
39
      const $containerWidth = $container.offsetWidth
40
      const $scrollWrapper = this.scrollWrapper
41
      const tagList = this.$parent.$refs.tag
42

43
      let firstTag = null
44
      let lastTag = null
45

46
      // find first tag and last tag
47
      if (tagList.length > 0) {
48
        firstTag = tagList[0]
49
        lastTag = tagList[tagList.length - 1]
50
      }
51

52
      if (firstTag === currentTag) {
53
        $scrollWrapper.scrollLeft = 0
54
      } else if (lastTag === currentTag) {
55
        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
56
      } else {
57
        // find preTag and nextTag
58
        const currentIndex = tagList.findIndex(item => item === currentTag)
59
        const prevTag = tagList[currentIndex - 1]
60
        const nextTag = tagList[currentIndex + 1]
61

62
        // the tag's offsetLeft after of nextTag
63
        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
64

65
        // the tag's offsetLeft before of prevTag
66
        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
67

68
        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
69
          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
70
        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
71
          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
72
        }
73
      }
74
    }
75
  }
76
}
77
</script>
78

79
<style lang="scss" scoped>
80
.scroll-container {
81
  white-space: nowrap;
82
  position: relative;
83
  overflow: hidden;
84
  width: 100%;
85
  ::v-deep {
86
    .el-scrollbar__bar {
87
      bottom: 0px;
88
    }
89
    .el-scrollbar__wrap {
90
      height: 49px;
91
    }
92
  }
93
}
94
</style>

从vue-element-admin复制文件src\store\modules\tagsView.js并放到相同目录下

tagsView.js

1
const state = {
2
  visitedViews: [],
3
  cachedViews: [],
4
  iframeViews: []
5
}
6

7
const mutations = {
8
  ADD_IFRAME_VIEW: (state, view) => {
9
    if (state.iframeViews.some(v => v.path === view.path)) return
10
    state.iframeViews.push(
11
      Object.assign({}, view, {
12
        title: view.meta.title || 'no-name'
13
      })
14
    )
15
  },
16
  ADD_VISITED_VIEW: (state, view) => {
17
    if (state.visitedViews.some(v => v.path === view.path)) return
18
    state.visitedViews.push(
19
      Object.assign({}, view, {
20
        title: view.meta.title || 'no-name'
21
      })
22
    )
23
  },
24
  ADD_CACHED_VIEW: (state, view) => {
25
    if (state.cachedViews.includes(view.name)) return
26
    if (view.meta && !view.meta.noCache) {
27
      state.cachedViews.push(view.name)
28
    }
29
  },
30
  DEL_VISITED_VIEW: (state, view) => {
31
    for (const [i, v] of state.visitedViews.entries()) {
32
      if (v.path === view.path) {
33
        state.visitedViews.splice(i, 1)
34
        break
35
      }
36
    }
37
    state.iframeViews = state.iframeViews.filter(item => item.path !== view.path)
38
  },
39
  DEL_IFRAME_VIEW: (state, view) => {
40
    state.iframeViews = state.iframeViews.filter(item => item.path !== view.path)
41
  },
42
  DEL_CACHED_VIEW: (state, view) => {
43
    const index = state.cachedViews.indexOf(view.name)
44
    index > -1 && state.cachedViews.splice(index, 1)
45
  },
46

47
  DEL_OTHERS_VISITED_VIEWS: (state, view) => {
48
    state.visitedViews = state.visitedViews.filter(v => {
49
      return v.meta.affix || v.path === view.path
50
    })
51
    state.iframeViews = state.iframeViews.filter(item => item.path === view.path)
52
  },
53
  DEL_OTHERS_CACHED_VIEWS: (state, view) => {
54
    const index = state.cachedViews.indexOf(view.name)
55
    if (index > -1) {
56
      state.cachedViews = state.cachedViews.slice(index, index + 1)
57
    } else {
58
      state.cachedViews = []
59
    }
60
  },
61
  DEL_ALL_VISITED_VIEWS: state => {
62
    // keep affix tags
63
    const affixTags = state.visitedViews.filter(tag => tag.meta.affix)
64
    state.visitedViews = affixTags
65
    state.iframeViews = []
66
  },
67
  DEL_ALL_CACHED_VIEWS: state => {
68
    state.cachedViews = []
69
  },
70
  UPDATE_VISITED_VIEW: (state, view) => {
71
    for (let v of state.visitedViews) {
72
      if (v.path === view.path) {
73
        v = Object.assign(v, view)
74
        break
75
      }
76
    }
77
  },
78
  DEL_RIGHT_VIEWS: (state, view) => {
79
    const index = state.visitedViews.findIndex(v => v.path === view.path)
80
    if (index === -1) {
81
      return
82
    }
83
    state.visitedViews = state.visitedViews.filter((item, idx) => {
84
      if (idx <= index || (item.meta && item.meta.affix)) {
85
        return true
86
      }
87
      const i = state.cachedViews.indexOf(item.name)
88
      if (i > -1) {
89
        state.cachedViews.splice(i, 1)
90
      }
91
      if(item.meta.link) {
92
        const fi = state.iframeViews.findIndex(v => v.path === item.path)
93
        state.iframeViews.splice(fi, 1)
94
      }
95
      return false
96
    })
97
  },
98
  DEL_LEFT_VIEWS: (state, view) => {
99
    const index = state.visitedViews.findIndex(v => v.path === view.path)
100
    if (index === -1) {
101
      return
102
    }
103
    state.visitedViews = state.visitedViews.filter((item, idx) => {
104
      if (idx >= index || (item.meta && item.meta.affix)) {
105
        return true
106
      }
107
      const i = state.cachedViews.indexOf(item.name)
108
      if (i > -1) {
109
        state.cachedViews.splice(i, 1)
110
      }
111
      if(item.meta.link) {
112
        const fi = state.iframeViews.findIndex(v => v.path === item.path)
113
        state.iframeViews.splice(fi, 1)
114
      }
115
      return false
116
    })
117
  }
118
}
119

120
const actions = {
121
  addView({ dispatch }, view) {
122
    dispatch('addVisitedView', view)
123
    dispatch('addCachedView', view)
124
  },
125
  addIframeView({ commit }, view) {
126
    commit('ADD_IFRAME_VIEW', view)
127
  },
128
  addVisitedView({ commit }, view) {
129
    commit('ADD_VISITED_VIEW', view)
130
  },
131
  addCachedView({ commit }, view) {
132
    commit('ADD_CACHED_VIEW', view)
133
  },
134
  delView({ dispatch, state }, view) {
135
    return new Promise(resolve => {
136
      dispatch('delVisitedView', view)
137
      dispatch('delCachedView', view)
138
      resolve({
139
        visitedViews: [...state.visitedViews],
140
        cachedViews: [...state.cachedViews]
141
      })
142
    })
143
  },
144
  delVisitedView({ commit, state }, view) {
145
    return new Promise(resolve => {
146
      commit('DEL_VISITED_VIEW', view)
147
      resolve([...state.visitedViews])
148
    })
149
  },
150
  delIframeView({ commit, state }, view) {
151
    return new Promise(resolve => {
152
      commit('DEL_IFRAME_VIEW', view)
153
      resolve([...state.iframeViews])
154
    })
155
  },
156
  delCachedView({ commit, state }, view) {
157
    return new Promise(resolve => {
158
      commit('DEL_CACHED_VIEW', view)
159
      resolve([...state.cachedViews])
160
    })
161
  },
162
  delOthersViews({ dispatch, state }, view) {
163
    return new Promise(resolve => {
164
      dispatch('delOthersVisitedViews', view)
165
      dispatch('delOthersCachedViews', view)
166
      resolve({
167
        visitedViews: [...state.visitedViews],
168
        cachedViews: [...state.cachedViews]
169
      })
170
    })
171
  },
172
  delOthersVisitedViews({ commit, state }, view) {
173
    return new Promise(resolve => {
174
      commit('DEL_OTHERS_VISITED_VIEWS', view)
175
      resolve([...state.visitedViews])
176
    })
177
  },
178
  delOthersCachedViews({ commit, state }, view) {
179
    return new Promise(resolve => {
180
      commit('DEL_OTHERS_CACHED_VIEWS', view)
181
      resolve([...state.cachedViews])
182
    })
183
  },
184
  delAllViews({ dispatch, state }, view) {
185
    return new Promise(resolve => {
186
      dispatch('delAllVisitedViews', view)
187
      dispatch('delAllCachedViews', view)
188
      resolve({
189
        visitedViews: [...state.visitedViews],
190
        cachedViews: [...state.cachedViews]
191
      })
192
    })
193
  },
194
  delAllVisitedViews({ commit, state }) {
195
    return new Promise(resolve => {
196
      commit('DEL_ALL_VISITED_VIEWS')
197
      resolve([...state.visitedViews])
198
    })
199
  },
200
  delAllCachedViews({ commit, state }) {
201
    return new Promise(resolve => {
202
      commit('DEL_ALL_CACHED_VIEWS')
203
      resolve([...state.cachedViews])
204
    })
205
  },
206
  updateVisitedView({ commit }, view) {
207
    commit('UPDATE_VISITED_VIEW', view)
208
  },
209
  delRightTags({ commit }, view) {
210
    return new Promise(resolve => {
211
      commit('DEL_RIGHT_VIEWS', view)
212
      resolve([...state.visitedViews])
213
    })
214
  },
215
  delLeftTags({ commit }, view) {
216
    return new Promise(resolve => {
217
      commit('DEL_LEFT_VIEWS', view)
218
      resolve([...state.visitedViews])
219
    })
220
  },
221
}
222

223
export default {
224
  namespaced: true,
225
  state,
226
  mutations,
227
  actions
228
}

2. 修改\src\layout\components\AppMain.vue#

src\ayout\components\AppMain.vue新增修改以下内容

代码：

1
<template>
2
  <section class="app-main">
3
    <transition name="fade-transform" mode="out-in">
4
      <!-- <router-view :key="key"  /> -->
5
      <router-view  :include="cachedViews" />
6

7
    </transition>
8
  </section>
9
</template>
10

11
<script>
12
export default {
13
  name: 'AppMain',
14
  computed: {
15
    // key() {
16
    //   return this.$route.path
17
    // },
18
    cachedViews() {
19
      return this.$store.state.tagsView.cachedViews
20
    }
21
  }
22
}
23
</script>
24

25
<style scoped>
26
.app-main {
27
  /*50 = navbar  */
28
  min-height: calc(100vh - 50px);
29
  width: 100%;
30
  position: relative;
31
  overflow: hidden;
32
}
33
.fixed-header+.app-main {
34
  padding-top: 50px;
35
}
36
</style>
37

38
<style lang="scss">
39
// fix css style bug in open el-dialog
40
.el-popup-parent--hidden {
41
  .fixed-header {
42
    padding-right: 15px;
43
  }
44
}
45
</style>

3. 修改\src\layout\components\index.js#

1
export { default as TagsView } from './TagsView'

4. 修改\src\layout\index.vue#

5. 修改 \src\store\getters.js#

1
visitedViews: state => state.tagsView.visitedViews,
2
cachedViews: state => state.tagsView.cachedViews,

6. 修改\src\store\index.js#

新增以下代码

1
import tagsView from './modules/tagsView'
2

3
const store = new Vuex.Store({
4
  modules: {
5
    // ...
6
    tagsView,
7
  },
8
})

7. 修改vue-admin-template\src\settings.js#

新增一行代码

1
tagsView: true,

8. 修改\src\store\modules\settings.js#

9. 新建 plugins文件夹,tab.js,index.js#

在src下面新建文件夹plugins，下面新建tab.js和index.js tab.js：

1
import store from '@/store'
2
import router from '@/router';
3

4
export default {
5
  // 刷新当前tab页签
6
  refreshPage(obj) {
7
    const { path, query, matched } = router.currentRoute;
8
    if (obj === undefined) {
9
      matched.forEach((m) => {
10
        if (m.components && m.components.default && m.components.default.name) {
11
          if (!['Layout', 'ParentView'].includes(m.components.default.name)) {
12
            obj = { name: m.components.default.name, path: path, query: query };
13
          }
14
        }
15
      });
16
    }
17
    return store.dispatch('tagsView/delCachedView', obj).then(() => {
18
      const { path, query } = obj
19
      router.replace({
20
        path: '/redirect' + path,
21
        query: query
22
      })
23
    })
24
  },
25
  // 关闭当前tab页签，打开新页签
26
  closeOpenPage(obj) {
27
    store.dispatch("tagsView/delView", router.currentRoute);
28
    if (obj !== undefined) {
29
      return router.push(obj);
30
    }
31
  },
32
  // 关闭指定tab页签
33
  closePage(obj) {
34
    if (obj === undefined) {
35
      return store.dispatch('tagsView/delView', router.currentRoute).then(({ lastPath }) => {
36
        return router.push(lastPath || '/');
37
      });
38
    }
39
    return store.dispatch('tagsView/delView', obj);
40
  },
41
  // 关闭所有tab页签
42
  closeAllPage() {
43
    return store.dispatch('tagsView/delAllViews');
44
  },
45
  // 关闭左侧tab页签
46
  closeLeftPage(obj) {
47
    return store.dispatch('tagsView/delLeftTags', obj || router.currentRoute);
48
  },
49
  // 关闭右侧tab页签
50
  closeRightPage(obj) {
51
    return store.dispatch('tagsView/delRightTags', obj || router.currentRoute);
52
  },
53
  // 关闭其他tab页签
54
  closeOtherPage(obj) {
55
    return store.dispatch('tagsView/delOthersViews', obj || router.currentRoute);
56
  },
57
  // 添加tab页签
58
  openPage(title, url, params) {
59
    var obj = { path: url, meta: { title: title } }
60
    store.dispatch('tagsView/addView', obj);
61
    return router.push({ path: url, query: params });
62
  },
63
  // 修改tab页签
64
  updatePage(obj) {
65
    return store.dispatch('tagsView/updateVisitedView', obj);
66
  }
67
}

index.js

1
import tab from './tab'
2

3
export default {
4
  install(Vue) {
5
    // 页签操作
6
    Vue.prototype.$tab = tab
7
  }
8
}

10. 修改main.js#

main.js新增两行代码：

1
import plugins from './plugins' // plugins
2
Vue.use(plugins)

11. 修改router文件夹中的index.js#

效果图#

大功告成：

音乐

音乐

vue-admin-template#

前言#

步骤#

1. 从vue-element-admin复制文件#

2. 修改\src\layout\components\AppMain.vue#

3. 修改\src\layout\components\index.js#

4. 修改\src\layout\index.vue#

5. 修改 \src\store\getters.js#

6. 修改\src\store\index.js#

7. 修改vue-admin-template\src\settings.js#

8. 修改\src\store\modules\settings.js#

9. 新建 plugins文件夹,tab.js,index.js#

10. 修改main.js#

11. 修改router文件夹中的index.js#

效果图#

支持与分享

音乐

文章目录

音乐

音乐

vue-admin-template实现TagViews标签页

vue-admin-template#

前言#

步骤#

1. 从vue-element-admin复制文件#

2. 修改\src\layout\components\AppMain.vue#

3. 修改\src\layout\components\index.js#

4. 修改\src\layout\index.vue#

5. 修改 \src\store\getters.js#

6. 修改\src\store\index.js#

7. 修改vue-admin-template\src\settings.js#

8. 修改\src\store\modules\settings.js#

9. 新建 plugins文件夹,tab.js,index.js#

10. 修改main.js#

11. 修改router文件夹中的index.js#

效果图#

支持与分享

音乐

文章目录