©2020-2024 ioDraw All rights reserved
一、从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
userfrom './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,那么这里你需要设置下。