vue-admin-template模板添加tagsview
增加国际化语言包,安装vue-i18n
1、从vue-element-admin复制文件
vue-admin-template\src\lang文件夹
vue-admin-template\src\utils\i18n.js
vue-admin-template\src\layout\components\Langselect文件夹
vue-admin-template\src\layout\views\i18n-demo文件夹
2、安装vue-i18n
3、修改 vue-admin-template\src\store\getters.js
,增加
language: state => state. app. language
4、修改 vue-admin-template\src\layout\components\Navbar.js
,增加
< template v- if = "device !== 'mobile'" >
< lang- select class = "right-menu-item hover-effect" / >
< / template>
import LangSelect from '@/components/LangSelect'
components: {
Breadcrumb,
Hamburger,
Screenfull
} ,
5、修改 vue-admin-template\src\main.js
import i18n from './lang'
Vue. use ( ElementUI, {
i18n: ( key, value) => i18n. t ( key, value)
} )
new Vue ( {
el: '#app' ,
router,
store,
i18n,
render: h => h ( App)
} )
使用
import { generateTitle } from '@/utils/i18n'
generateTitle,
就是把你之前的固定文字,改为{ { generateTitle( item.meta.title) } }
此处的item.meta.title,就是在路由中配置的meta
一定不要忘记在methods中声明generateTitle方法
{ { item.data.value } } 替换为:{ { generateTitle( item.data.value) } }
对应router中的 data: { value : 'Example' } ,
在需要替换的地方直接使用 { { $t ( 'route.dashboard' ) } }
对应语言包lang中的:
route: {
dashboard: '首页' ,
} ,
增加tabsview
1、从vue-element-admin复制以下文件
vue-admin-template\src\layout\components\TagsView文件夹
vue-admin-template\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>
</ keep-alive>
</ transition>
</ section>
</ template>
export default {
name: 'AppMain' ,
computed: {
cachedViews ( ) {
return this . $store. state. tagsView. cachedViews
}
}
}
<style scoped>
.app-main {
min-height : calc ( 100vh - 50px) ;
width : 100%;
position : relative;
overflow : hidden;
}
.fixed-header + .app-main {
padding-top : 50px;
}
</style>
<style lang="scss">
// fix css style bug in open el-dialog
// .el-popup-parent--hidden {
// .fixed-header {
// padding-right : 15px;
// }
// }
.hasTagsView {
.app-main {
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
,新增tag
< 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 />
< 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 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
8、修改 vue-admin-template\src\settings.js
添加
tagsView: true ,
9、修改 vue-admin-template\src\store\modules\settings.js
const { showSettings, fixedHeader, sidebarLogo, tagsView } = defaultSettings
const state = {
showSettings: showSettings,
fixedHeader: fixedHeader,
sidebarLogo: sidebarLogo,
tagsView: tagsView
}
10、删除 vue-admin-template\src\layout\components\TagsView\index.vue
中routes方法
computed: {
visitedViews ( ) {
return this . $store. state. tagsView. visitedViews
}
} ,
11、增加routes 为空的判断,避免报错
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
} ,