Vue + iview框架,搭建項目遇到的相關問題記錄 - 國際化router.js不能實現

例子展現:

 

概述:

  最近在使用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>
main.vue

  其中的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 中的引用:

    

相關文章
相關標籤/搜索