vue-admin-template是没有tagsview功能的,但是vue-element-admin有,关于vue-admin-template和vue-element-admin的区别,作者说明vue-element-admin是一个集成方案,而vue-admin-template是一个基础的框架。那么tagsview组件可以从vue-element-admin上移植到vue-admin-template上。
1、从vue-element-admin复制文件:
cp -r ./vue-element-admin-master/src/layout/components/TagsView vue-admin-template/src/layout/components/
cp ./vue-element-admin-master/src/store/modules/tagsView.js vue-admin-template/src/store/modules/
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.path
}
}
}
<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>
3、修改vue-admin-template/src/layout/components/index.js文件:
# 增加一行:
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="main-container">
<div :class="{'fixed-header':fixedHeader}">
<navbar />
</div>
<tags-view /> <!-- 此处增加tag-->
<app-main />
</div>
</div>
</template>
import { Navbar, Sidebar, AppMain, TagsView } from './components'
components: {
Navbar,
Sidebar,
AppMain,
TagsView
},
5、修改vue-admin-template/src/store/getters.js文件:
# 增加:
visitedViews: state => state.tagsView.visitedViews,
cachedViews: state => state.tagsView.cachedViews,
6、修改vue-admin-template/src/store/index.js文件:
import tagsView from './modules/tagsView'
const store = new Vuex.Store({
modules: {
app,
settings,
tagsView,
user
},
getters
})
7、修改vue-admin-template/src/settings.js文件:
添加tagsView: true
8、修改vue-admin-template/src/store/modules/settings.js文件:
const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
const state = {
showSettings: showSettings,
tagsView: tagsView,
fixedHeader: fixedHeader,
sidebarLogo: sidebarLogo
}
9、修改vue-admin-template/src/layout/components/TagsView/index.vue文件:
# 修改获取路由方式
routes() {
// return this.$store.state.permission.routes
return this.$router.options.routes
}