vue-element-template增加多标签页tagsview

一、从vue-element-admin复制文件：
　　vue-admin-template\src\layout\components\TagsView 文件夹
　　vue-admin-template\src\store\modules\tagsView.js

二、修改 vue-admin-template\src\layout\components\AppMain.vue ：AppMain.vue文件，修改如下：

<template>
  <section class="app-main">
    <transition name="fade-transform" mode="out-in">
      <!-- <router-view :key="key" />-->
      <keep-alive :include="cachedViews">  <!--这个是新增的-->
        <router-view></router-view>
      </keep-alive>
    </transition>
  </section>
</template>

<script>
export default {
  name: 'AppMain',
  computed: {
    key () {
      return this.$route.path
    },
    cachedViews () {   <!--这个是新增的-->
      return this.$store.state.tagsView.cachedViews
    }
  }
}
</script>
<style lang="scss" scoped>
.app-main {
  /*50 = navbar  */
  min-height: calc(100vh - 50px);
  width: 100%;
  position: relative;
  overflow: hidden;
}
.fixed-header + .app-main {
  padding-top: 50px;
}

.hasTagsView {
  .app-main {
    /* 84 = navbar + tags-view = 50 + 34 */
    min-height: calc(100vh - 84px);
  }

  .fixed-header + .app-main {
    padding-top: 84px;
  }
}
</style>

三、修改vue-admin-template\src\layout\components\index.js，新增如下行：

export { default as Navbar } from './Navbar'
export { default as Sidebar } from './Sidebar'
export { default as AppMain } from './AppMain'
export { default as TagsView } from './TagsView'  //这个是新增的

四、在 vue-admin-template\src\layout\index.vue 文件中 新增 tagsview标签

五、修改 vue-admin-template\src\store\getters.js，增加：

const getters = {
  sidebar: state => state.app.sidebar,
  device: state => state.app.device,
  token: state => state.user.token,
  avatar: state => state.user.avatar,
  name: state => state.user.name,
  menus: state => state.user.menus,
  visitedViews: state => state.tagsView.visitedViews, //这个是新增的
  cachedViews: state => state.tagsView.cachedViews,  //这个是新增的
}
export default getters

六、修改 vue-admin-template\src\store\index.js

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import app from './modules/app'
import settings from './modules/settings'
import user from './modules/user'
import tagsView from './modules/tagsView' //这个是新增的

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    app,
    settings,
    user,
    tagsView,  //这个是新增的
  },
  getters
})

export default store

好像这里就可以显示出来了

七、修改vue-admin-template\src\settings.js 添加

module.exports = {

  title: 'Vue Admin Template',
  tagsView: true,  //这个是新增的  设置为根据值，是否选择加载。
  /**
   * @type {boolean} true | false
   * @description Whether fix the header
   */
  fixedHeader: false,

  /**
   * @type {boolean} true | false
   * @description Whether show the logo in sidebar
   */
  sidebarLogo: false
}

八、修改vue-admin-template\src\store\modules\settings.js

import defaultSettings from '@/settings'

const { showSettings, fixedHeader, sidebarLogo, tagsView } = defaultSettings  //tagsView 这个是新增的

const state = {
  showSettings: showSettings,
  tagsView: tagsView,   //tagsView 这个是新增的
  fixedHeader: fixedHeader,
  sidebarLogo: sidebarLogo
}

const mutations = {
  CHANGE_SETTING: (state, { key, value }) => {
    // eslint-disable-next-line no-prototype-builtins
    if (state.hasOwnProperty(key)) {
      state[key] = value
    }
  }
}

const actions = {
  changeSetting ({ commit }, data) {
    commit('CHANGE_SETTING', data)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

九、解决控制台报错：
1、删除vue-admin-template\src\layout\components\TagsView\index.vue中routes方法（因为没有用到权限校验）

  computed: {
    visitedViews () {
      return this.$store.state.tagsView.visitedViews
    },
    // routes() {
    //   return this.$store.state.permission.routes   //把这个注释掉
    // }
  },

2、遍历标签时可能控制台报错
filterAffixTags (routes, basePath = '/') {
let tags = []
//判断是否为空，否则控制台会报错 这个是新增的
if (this.routes) {
routes.forEach(route => {
if (route.meta && route.meta.affix) {
const tagPath = path.resolve(basePath, route.path)
tags.push({
fullPath: tagPath,
path: tagPath,
name: route.name,
meta: { ...route.meta }
})
}
if (route.children) {
const tempTags = this.filterAffixTags(route.children, route.path)
if (tempTags.length >= 1) {
tags = [...tags, ...tempTags]
}
}
})
}
return tags
},

最后如果你要固定住tagsView,那么这里你需要设置下。