vue-admin-template模板添加tagsview的實現(xiàn)
一、從vue-element-admin復制文件
vue-admin-template\src\layout\components\TagsView 文件夾
vue-admin-template\src\store\modules\tagsView.js
#vue-admin-template\static 文件夾
#vue-admin-template\src\lang 文件夾
#vue-admin-template\src\utils\i18n.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>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>三、修改vue-admin-template\src\layout\components\index.js
新增如下行:
export { default as TagsView } from './TagsView'四、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
},五、修改 vue-admin-template\src\store\getters.js
增加:
visitedViews: state => state.tagsView.visitedViews, cachedViews: state => state.tagsView.cachedViews,
六、修改 vue-admin-template\src\store\index.js
import tagsView from './modules/tagsView'
const store = new Vuex.Store({
modules: {
app,
permission,
settings,
tagsView,
user
},
getters
})七、修改 vue-admin-template\src\main.js
import i18n from './lang' // Internationalization
new Vue({
el: '#app',
router,
store,
i18n,
render: h => h(App)
})八、修改vue-admin-template\src\settings.js 添加
tagsView: true,
九、修改vue-admin-template\src\store\modules\settings.js
const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
const state = {
showSettings: showSettings,
tagsView: tagsView,
fixedHeader: fixedHeader,
sidebarLogo: sidebarLogo
}解決控制臺報錯:
1、刪除vue-admin-template\src\layout\components\TagsView\index.vue中routes方法
(因為沒有用到權限校驗)

2、遍歷標簽時可能報錯

參考
https://github.com/PanJiaChen/vue-admin-template/issues/349
到此這篇關于vue-admin-template模板添加tagsview的實現(xiàn)的文章就介紹到這了,更多相關vue-admin-template模板添加tagsview內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
ElementUI級聯(lián)選擇器實現(xiàn)同一父級下最多只能選中一個子級
本文主要介紹了ElementUI級聯(lián)選擇器實現(xiàn)同一父級下最多只能選中一個子級,同一父級下的子節(jié)點單選,又可以選擇多個不同父級下的節(jié)點,具有一定參考價值,感興趣的可以了解一下2023-10-10
詳解vue3中setUp和reactive函數(shù)的用法
這篇文章主要介紹了vue3函數(shù)setUp和reactive函數(shù)的相關知識及setup函數(shù)和reactive函數(shù)的注意點,通過具體代碼給大家介紹的非常詳細,需要的朋友可以參考下2021-06-06
vue.js實現(xiàn)開關(switch)組件實例代碼
這篇文章介紹了vue.js實現(xiàn)開關(switch)組件的實例代碼,文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-06-06
Vue 2.5.2下axios + express 本地請求404的解決方法
下面小編就為大家分享一篇Vue 2.5.2下axios + express 本地請求404的解決方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02

