1. 需求

vue-element-template 是一个基础模板，默认没有 tagsview。所以要手动添加。
参考最全面的集成方案框架 vue-element-admin ，拷贝和修改相关文件到你的项目中。

2. 修改

1. 复制如下文件或文件夹

\src\layout\components\TagsView\src\store\modules\tagsView.js

2. 修改文件 \src\layout\components\AppMain.vue。

<template><section class="app-main"><transition name="fade-transform" mode="out-in"><!-- <router-view :key="key" /> --><!-- 使用 keep-alive 包裹 --><keep-alive :include="cachedViews"><router-view :key="key" /></keep-alive></transition></section>
</template>

添加计算属性 cachedViews。

computed: {cachedViews() {return this.$store.state.tagsView.cachedViews},key() {return this.$route.path}
}

修改 css，如下代码直接拷贝覆盖。

<style lang="scss" scoped>
.app-main {/*50 = navbar 34px tagsview */min-height: calc(100vh - 84px);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>

3. 修改文件 \src\layout\index.vue。

<template><div :class="classObj" class="app-wrapper"><div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" /><sidebar class="sidebar-container" /><div class="main-container"><div :class="{'fixed-header':fixedHeader}"><navbar /><!-- 新增 --><tags-view/></div><app-main /></div></div>
</template>

添加 TagsView 组件的引用。

import { Navbar, Sidebar, AppMain, TagsView } from './components'

components: {Navbar,Sidebar,AppMain,TagsView
},

4. 修改文件 \src\layout\components\index.js，导出 TagsView。

export { default as TagsView } from './TagsView/index.vue'

5. 修改文件 \src\store\getters.js，添加属性 visitedViews 和 cachedViews。

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

6. 修改文件 \src\store\index.js，导出 tagsview 相关信息。

import tagsView from './modules/tagsView'

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

7. 修改文件 \src\layout\components\TagsView\index.vue，屏蔽计算属性routes，因为暂时没用上权限。

computed: {visitedViews() {return this.$store.state.tagsView.visitedViews},// routes() {// 屏蔽权限，否则报错//   return this.$store.state.permission.routes// }
},

首次加载没有 tags-view，因为方法 filterAffixTags 报错 routes。修改方法 initTags。

initTags() {if(this.routes) {const affixTags = this.affixTags = this.filterAffixTags(this.routes)for (const tag of affixTags) {// Must have tag nameif (tag.name) {this.$store.dispatch('tagsView/addVisitedView', tag)}}}
},

8. 修改src/layout/index.vue，通过needTagsView判断

<template><div :class="classObj" class="app-wrapper"><div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" /><sidebar class="sidebar-container" /><div :class="{hasTagsView:needTagsView}" class="main-container"><div :class="{'fixed-header':fixedHeader}"><navbar /><tags-view v-if="needTagsView" /></div><app-main /></div></div>
</template><script>
import { AppMain, Navbar, Sidebar, TagsView } from './components'
import ResizeMixin from './mixin/ResizeHandler'
import { mapState } from 'vuex'export default {name: 'Layout',components: {AppMain,Navbar,Sidebar,TagsView},mixins: [ResizeMixin],computed: {...mapState({sidebar: state => state.app.sidebar,device: state => state.app.device,showSettings: state => state.settings.showSettings,needTagsView: state => state.settings.tagsView,fixedHeader: state => state.settings.fixedHeader}),classObj() {return {hideSidebar: !this.sidebar.opened,openSidebar: this.sidebar.opened,withoutAnimation: this.sidebar.withoutAnimation,mobile: this.device === 'mobile'}}},methods: {handleClickOutside() {this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })}}
}
</script><style lang="scss" scoped>@import "~@/styles/mixin.scss";@import "~@/styles/variables.scss";.app-wrapper {@include clearfix;position: relative;height: 100%;width: 100%;&.mobile.openSidebar {position: fixed;top: 0;}}.drawer-bg {background: #000;opacity: 0.3;width: 100%;top: 0;height: 100%;position: absolute;z-index: 999;}.fixed-header {position: fixed;top: 0;right: 0;z-index: 9;width: calc(100% - #{$sideBarWidth});transition: width 0.28s;}.hideSidebar .fixed-header {width: calc(100% - 54px)}.mobile .fixed-header {width: 100%;}
</style>

效果图：