//注释后面 【这个新增的】 表示我加的
如图就是要实现这种效果参考链接:https://www.cnblogs.com/flypig666/p/11854538.html
一、从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标签
image.png
五、修改 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,那么这里你需要设置下。
