需求
vue-element-template 是一个基础模板,默认没有 tagsview。所以要手动添加。如果想先知道 vue-element-template 框架如何使用可参考《vue-element-template 框架嵌入 vue2.x 项目中》
下载
参考最全面的集成方案框架 vue-element-admin ,拷贝和修改相关文件到你的项目中。
嵌入
步骤一
复制如下文件或文件夹
\src\layout\components\TagsView
\src\store\modules\tagsView.js
步骤二
修改文件 \src\layout\components\AppMain.vue。
<template>
<section class="app-main">
<transition name="fade-transform" mode="out-in">
<!-- <router-view :key="key" /> -->
<!-- 使用 keep-alive 包裹 -->
<keep-alive :include="cachedViews">
<router-view :key="key" />
</keep-alive>
</transition>
</section>
</template>
添加计算属性 cachedViews。
computed: {
cachedViews() {
return this.$store.state.tagsView.cachedViews
},
key() {
return this.$route.path
}
}
修改 css,如下代码直接拷贝覆盖。
<style lang="scss" scoped>
.app-main {
/*50 = navbar 34px tagsview */
min-height: calc(100vh - 84px);
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>
步骤三
修改文件 \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 />
<!-- 新增 -->
<tags-view/>
</div>
<app-main />
</div>
</div>
</template>
添加 TagsView 组件的引用。
import { Navbar, Sidebar, AppMain, TagsView } from './components'
components: {
Navbar,
Sidebar,
AppMain,
TagsView
},
步骤四
修改文件 \src\layout\components\index.js,导出 TagsView。
export { default as TagsView } from './TagsView/index.vue'
步骤五
修改文件 \src\store\getters.js,添加属性 visitedViews 和 cachedViews。
visitedViews: state => state.tagsView.visitedViews,
cachedViews: state => state.tagsView.cachedViews
步骤六
修改文件 \src\store\index.js,导出 tagsview 相关信息。
import tagsView from './modules/tagsView'
const store = new Vuex.Store({
modules: {
app,
settings,
tagsView,// 新增
user
},
getters
})
步骤七
修改文件 \src\layout\components\TagsView\index.vue,屏蔽计算属性routes,因为暂时没用上权限。
computed: {
visitedViews() {
return this.$store.state.tagsView.visitedViews
},
// routes() {// 屏蔽权限,否则报错
// return this.$store.state.permission.routes
// }
},
首次加载没有 tags-view,因为方法 filterAffixTags 报错 routes。修改方法 initTags。
initTags() {
if(this.routes) {
const affixTags = this.affixTags = this.filterAffixTags(this.routes)
for (const tag of affixTags) {
// Must have tag name
if (tag.name) {
this.$store.dispatch('tagsView/addVisitedView', tag)
}
}
}
},