最近在使用vue + iview框架進行web開發,而且有一個需求,須要實現web端的國際化,在完成相關配置文件後,發現router.js 中沒法配置,而且會出現異常,在通過百度找不到出路後,經過對項目結構的理解,最終解決了該問題。html
如演示上面的,在切換語言時,頁面會進行刷新,這是由於若是不刷新頁面,Table 表格中的表頭會由於緩存的緣由致使語言版本切換無效,而且,表單驗證效果也將是切換以前的,此處還能進行優化。vue
國際化:web
vue.js國際化可使用 i18n這個插件,直接使用 npm 就能進行插件安裝,並且iview框架中,好像已經集成了 i18n,只用直接調用就能夠了vuex
須要提供語言庫,用來進行頁面上各類顯示字段的國際化,由於 i18n 的國際化實現須要切換到不一樣的語言庫npm
router.js 路由,沒法使用 $t 這個 i18n 的國際化標識進行語言切換緩存
緣由:在項目 src/main.js 中,i18n與router屬於同一級別,所以沒法在router.js中使用 i18napp
解決步驟:框架
①找到整個項目的佈局文件 src/view/main.vue 它是整個 ivew框架的佈局文件,包含了整個頁面的實現;less
<template> <Layout style="height: 100%" class="main"> <Sider hide-trigger collapsible :width="256" :collapsed-width="64" v-model="collapsed" class="left-sider" :style="{overflow: 'hidden'}"> <side-menu accordion ref="sideMenu" :active-name="$route.name" :collapsed="collapsed" @on-select="turnToPage" :menu-list="menuList"> <!-- 須要放在菜單上面的內容,如Logo,寫在side-menu標籤內部,以下 --> <div class="logo-con"> <img v-show="!collapsed" :src="maxLogo" key="max-logo" /> <img v-show="collapsed" :src="minLogo" key="min-logo" /> </div> </side-menu> </Sider> <Layout> <Header class="header-con"> <header-bar :collapsed="collapsed" @on-coll-change="handleCollapsedChange"> <user :user-avator="userAvator"/> <language @on-lang-change="setLocal" style="margin-right: 10px;" :lang="local"/> <fullscreen v-model="isFullscreen" style="margin-right: 10px;"/> </header-bar> </Header> <Content class="main-content-con"> <Layout class="main-layout-con"> <div class="tag-nav-wrapper"> <!-- 這裏是每一個頁面的小標籤 --> <tags-nav :value="$route" @input="handleClick" :list="tagNavList" @on-close="handleCloseTag"/> </div> <Content class="content-wrapper"> <keep-alive :include="cacheList"> <router-view/> </keep-alive> </Content> </Layout> </Content> </Layout> </Layout> </template> <script> import SideMenu from './components/side-menu' import HeaderBar from './components/header-bar' import TagsNav from './components/tags-nav' import User from './components/user' import Fullscreen from './components/fullscreen' import Language from './components/language' import { mapMutations, mapActions } from 'vuex' import { getNewTagList, getNextRoute, routeEqual } from '@/libs/util' import minLogo from '@/assets/images/logo-min.jpg' import maxLogo from '@/assets/images/logo.jpg' import './main.less' export default { name: 'Main', components: { SideMenu, HeaderBar, Language, TagsNav, Fullscreen, User }, data () { return { collapsed: false, minLogo, maxLogo, isFullscreen: false } }, computed: { tagNavList () { return this.$store.state.app.tagNavList }, tagRouter () { return this.$store.state.app.tagRouter }, userAvator () { return this.$store.state.user.avatorImgPath }, cacheList () { return this.tagNavList.length ? this.tagNavList.filter(item => !(item.meta && item.meta.notCache)).map(item => item.name) : [] }, menuList () { return this.$store.getters.menuList }, local () { return this.$store.state.app.local } }, methods: { ...mapMutations([ 'setBreadCrumb', 'setTagNavList', 'addTag', 'setLocal' ]), ...mapActions([ 'handleLogin' ]), turnToPage (route) { let { name, params, query } = {} if (typeof route === 'string') name = route else { name = route.name params = route.params query = route.query } if (name.indexOf('isTurnByHref_') > -1) { window.open(name.split('_')[1]) return } this.$router.push({ name, params, query }) }, handleCollapsedChange (state) { this.collapsed = state }, handleCloseTag (res, type, route) { let openName = '' if (type === 'all') { this.turnToPage('home') openName = 'home' } else if (routeEqual(this.$route, route)) { if (type === 'others') { openName = route.name } else { const nextRoute = getNextRoute(this.tagNavList, route) this.$router.push(nextRoute) openName = nextRoute.name } } this.setTagNavList(res) this.$refs.sideMenu.updateOpenName(openName) }, handleClick (item) { this.turnToPage(item) } }, watch: { '$route' (newRoute) { this.setBreadCrumb(newRoute.matched) this.setTagNavList(getNewTagList(this.tagNavList, newRoute)) } }, mounted () { console.log(123123123131231) /** * @description 初始化設置麪包屑導航和標籤導航 */ this.setTagNavList() this.addTag({ route: this.$store.state.app.homeRoute }) this.setBreadCrumb(this.$route.matched) // 設置初始語言 this.setLocal(this.$i18n.locale) } } </script>
其中的Slider控件就是左側的導航菜單的實現iview
<Sider hide-trigger collapsible :width="256" :collapsed-width="64" v-model="collapsed" class="left-sider" :style="{overflow: 'hidden'}"> <side-menu accordion ref="sideMenu" :active-name="$route.name" :collapsed="collapsed" @on-select="turnToPage" :menu-list="menuList"> <!-- 須要放在菜單上面的內容,如Logo,寫在side-menu標籤內部,以下 --> <div class="logo-con"> <img v-show="!collapsed" :src="maxLogo" key="max-logo" /> <img v-show="collapsed" :src="minLogo" key="min-logo" /> </div> </side-menu> </Sider>
②根據,src/view/main.vue 中對SliderMenu的引用,找到它的佈局文件
③找到 SliderMenu 的佈局文件,發現了菜單顯示的實現方法,接着找到具體實現的方法
④在 mixin.js 文件中找到了具體實現方法的邏輯:
⑤ this.$config 是在main.js中定義好了的,再找到 config的配置文件。
⑥config中的配置文件,定義了是否使用國際化
⑦按照上面的思路,已經能夠理清整個項目菜單的實現邏輯,如今只用在router.js中將title的命名,經過寫好的語言庫對象中定義的相關key,就能實現匹配。
定義的語言庫:中文(部分)
定義的語言庫:英文(部分)
router.js 中的引用: