//注釋后面 【這個(gè)新增的】 表示我加的
如圖就是要實(shí)現(xiàn)這種效果參考鏈接:https://www.cnblogs.com/flypig666/p/11854538.html
一荣德、從vue-element-admin復(fù)制文件：
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"> <!--這個(gè)是新增的-->
<router-view></router-view>
</keep-alive>
</transition>
</section>
</template>
<script>
export default {
name: 'AppMain',
computed: {
key () {
return this.$route.path
},
cachedViews () { <!--這個(gè)是新增的-->
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' //這個(gè)是新增的
四鸦做、在 vue-admin-template\src\layout\index.vue 文件中 新增 tagsview標(biāo)簽
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, //這個(gè)是新增的
cachedViews: state => state.tagsView.cachedViews, //這個(gè)是新增的
}
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' //這個(gè)是新增的
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
app,
settings,
user,
tagsView, //這個(gè)是新增的
},
getters
})
export default store
七锐秦、修改vue-admin-template\src\settings.js 添加
module.exports = {
title: 'Vue Admin Template',
tagsView: true, //這個(gè)是新增的 設(shè)置為根據(jù)值咪奖，是否選擇加載。
/**
* @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 這個(gè)是新增的
const state = {
showSettings: showSettings,
tagsView: tagsView, //tagsView 這個(gè)是新增的
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
}
九赡艰、解決控制臺(tái)報(bào)錯(cuò)：
1、刪除vue-admin-template\src\layout\components\TagsView\index.vue中routes方法（因?yàn)闆]有用到權(quán)限校驗(yàn)）
computed: {
visitedViews () {
return this.$store.state.tagsView.visitedViews
},
// routes() {
// return this.$store.state.permission.routes //把這個(gè)注釋掉
// }
},
2斤葱、遍歷標(biāo)簽時(shí)可能控制臺(tái)報(bào)錯(cuò)
filterAffixTags (routes, basePath = '/') {
let tags = []
//判斷是否為空慷垮，否則控制臺(tái)會(huì)報(bào)錯(cuò) 這個(gè)是新增的
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,那么這里你需要設(shè)置下。
