一、步骤
1.引入文件
从vue-element-admin中复制
(1)复制src\layout\components\TagsView文件夹对应位置
(2)复制src\store\modules\tagsView.js文件到对应位置
2.vue-admin-template\src\layout\components\AppMain.vue新增内容:
<template>
<section class="app-main">
<transition name="fade-transform" mode="out-in">
<keep-alive :include="cachedViews">
<router-view :key="key" />
</keep-alive>
</transition>
</section>
</template>
export default {
name: 'AppMain',
computed: {
// 需要缓存的页面 固钉
cachedViews() {
return this.$store.state.tagsView.cachedViews
},
key() {
return this.$route.fullPath
}
}
}
.app-main {
/* 50= navbar 50 */
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;
}
}
3.vue-admin-template\src\layout\components\AppMain.vue新增内容:
export { default as TagsView } from './TagsView'
4.vue-admin-template\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="{hasTagsView:needTagsView}" class="main-container">
<div :class="{'fixed-header':fixedHeader}">
<navbar />
<tags-view v-if="needTagsView"/>
</div>
<app-main />
</div>
</div>
</template>
import { Navbar, Sidebar, AppMain, TagsView } from './components'
import ResizeMixin from './mixin/ResizeHandler'
export default {
name: 'Layout',
components: {
Navbar,
Sidebar,
AppMain,
TagsView
},
computed: {
sidebar() {
return this.$store.state.app.sidebar
},
device() {
return this.$store.state.app.device
},
fixedHeader() {
return this.$store.state.settings.fixedHeader
},
needTagsView() {
return this.$store.state.settings.tagsView
},
5.修改 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
6.修改 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,
visitedViews: state => state.tagsView.visitedViews,
cachedViews: state => state.tagsView.cachedViews
}
export default getters
6.修改 vue-admin-template\src\store\modules\settings.js
const { showSettings, fixedHeader, sidebarLogo, tagsView } = defaultSettings
const state = {
showSettings: showSettings,
fixedHeader: fixedHeader,
sidebarLogo: sidebarLogo,
tagsView: tagsView
}
7.修改vue-admin-template\src\settings.js 添加
tagsView: true,
8.最终结果
参考文献
vue-admin-template模板添加tagsview