Vue + iview框架，搭建项目遇到的相关问题记录

例子展示：

概述：

　　最近在使用vue + iview框架进行web开发，并且有一个需求，需要实现web端的国际化，在完成相关配置文件后，发现router.js 中无法配置，并且会出现异常，在经过百度找不到出路后，通过对项目结构的理解，最终解决了该问题。

注意：

　　如演示上面的，在切换语言时，页面会进行刷新，这是因为如果不刷新页面，Table 表格中的表头会因为缓存的原因导致语言版本切换无效，并且，表单验证效果也将是切换之前的，此处还能进行优化。

国际化：

　　插件：

　　　　vue.js国际化可以使用 i18n这个插件，直接使用 npm 就能进行插件安装，而且iview框架中，好像已经集成了 i18n，只用直接调用就可以了

　　提供语言库：

　　　　需要提供语言库，用来进行页面上各种显示字段的国际化，因为 i18n 的国际化实现需要切换到不同的语言库

问题：

　　router.js 路由，无法使用 $t 这个 i18n 的国际化标识进行语言切换

原因：在项目 src/main.js 中，i18n与router属于同一级别，因此无法在router.js中使用 i18n

解决步骤：

　　①找到整个项目的布局文件 src/view/main.vue 它是整个 ivew框架的布局文件，包含了整个页面的实现；

1<template>
2  <Layout style="height: 100%" class="main">
3    <Sider hide-trigger collapsible :width="256" :collapsed-width="64" v-model="collapsed" class="left-sider" :style="{overflow: 'hidden'}">
4      <side-menu accordion ref="sideMenu" :active-name="$route.name" :collapsed="collapsed" @on-select="turnToPage" :menu-list="menuList">
5        <!-- 需要放在菜单上面的内容，如Logo，写在side-menu标签内部，如下 -->
6        <div class="logo-con">
7          <img v-show="!collapsed" :src="maxLogo" key="max-logo" />
8          <img v-show="collapsed" :src="minLogo" key="min-logo" />
9        </div>
10      </side-menu>
11    </Sider>
12    <Layout>
13      <Header class="header-con">
14        <header-bar :collapsed="collapsed" @on-coll-change="handleCollapsedChange">
15          <user :user-avator="userAvator"/>
16          <language @on-lang-change="setLocal" style="margin-right: 10px;" :lang="local"/>
17          <fullscreen v-model="isFullscreen" style="margin-right: 10px;"/>
18        </header-bar>
19      </Header>
20      <Content class="main-content-con">
21        <Layout class="main-layout-con">
22          <div class="tag-nav-wrapper">
23            <!-- 这里是每个页面的小标签 -->
24            <tags-nav :value="$route" @input="handleClick" :list="tagNavList" @on-close="handleCloseTag"/>
25          </div>
26          <Content class="content-wrapper">
27            <keep-alive :include="cacheList">
28              <router-view/>
29            </keep-alive>
30          </Content>
31        </Layout>
32      </Content>
33    </Layout>
34  </Layout>
35</template>
36<script>
37import SideMenu from './components/side-menu'
38import HeaderBar from './components/header-bar'
39import TagsNav from './components/tags-nav'
40import User from './components/user'
41import Fullscreen from './components/fullscreen'
42import Language from './components/language'
43import { mapMutations, mapActions } from 'vuex'
44import { getNewTagList, getNextRoute, routeEqual } from '@/libs/util'
45import minLogo from '@/assets/images/logo-min.jpg'
46import maxLogo from '@/assets/images/logo.jpg'
47import './main.less'
48export default {
49  name: 'Main',
50  components: {
51    SideMenu,
52    HeaderBar,
53    Language,
54    TagsNav,
55    Fullscreen,
56    User
57  },
58  data () {
59    return {
60      collapsed: false,
61      minLogo,
62      maxLogo,
63      isFullscreen: false
64    }
65  },
66  computed: {
67    tagNavList () {
68      return this.$store.state.app.tagNavList
69    },
70    tagRouter () {
71      return this.$store.state.app.tagRouter
72    },
73    userAvator () {
74      return this.$store.state.user.avatorImgPath
75    },
76    cacheList () {
77      return this.tagNavList.length ? this.tagNavList.filter(item => !(item.meta && item.meta.notCache)).map(item => item.name) : []
78    },
79    menuList () {
80      return this.$store.getters.menuList
81    },
82    local () {
83      return this.$store.state.app.local
84    }
85  },
86  methods: {
87    ...mapMutations([
88      'setBreadCrumb',
89      'setTagNavList',
90      'addTag',
91      'setLocal'
92    ]),
93    ...mapActions([
94      'handleLogin'
95    ]),
96    turnToPage (route) {
97      let { name, params, query } = {}
98      if (typeof route === 'string') name = route
99      else {
100        name = route.name
101        params = route.params
102        query = route.query
103      }
104      if (name.indexOf('isTurnByHref_') > -1) {
105        window.open(name.split('_')[1])
106        return
107      }
108      this.$router.push({
109        name,
110        params,
111        query
112      })
113    },
114    handleCollapsedChange (state) {
115      this.collapsed = state
116    },
117    handleCloseTag (res, type, route) {
118      let openName = ''
119      if (type === 'all') {
120        this.turnToPage('home')
121        openName = 'home'
122      } else if (routeEqual(this.$route, route)) {
123        if (type === 'others') {
124          openName = route.name
125        } else {
126          const nextRoute = getNextRoute(this.tagNavList, route)
127          this.$router.push(nextRoute)
128          openName = nextRoute.name
129        }
130      }
131      this.setTagNavList(res)
132      this.$refs.sideMenu.updateOpenName(openName)
133    },
134    handleClick (item) {
135      this.turnToPage(item)
136    }
137  },
138  watch: {
139    '$route' (newRoute) {
140      this.setBreadCrumb(newRoute.matched)
141      this.setTagNavList(getNewTagList(this.tagNavList, newRoute))
142    }
143  },
144  mounted () {
145    console.log(123123123131231)
146    /**
147     * @description 初始化设置面包屑导航和标签导航
148     */
149    this.setTagNavList()
150    this.addTag({
151      route: this.$store.state.app.homeRoute
152    })
153    this.setBreadCrumb(this.$route.matched)
154    // 设置初始语言
155    this.setLocal(this.$i18n.locale)
156  }
157}
158</script>

main.vue

　　其中的Slider控件就是左侧的导航菜单的实现

1<Sider hide-trigger collapsible :width="256" :collapsed-width="64" v-model="collapsed" class="left-sider" :style="{overflow: 'hidden'}">
2      <side-menu accordion ref="sideMenu" :active-name="$route.name" :collapsed="collapsed" @on-select="turnToPage" :menu-list="menuList">
3        <!-- 需要放在菜单上面的内容，如Logo，写在side-menu标签内部，如下 -->
4        <div class="logo-con">
5          <img v-show="!collapsed" :src="maxLogo" key="max-logo" />
6          <img v-show="collapsed" :src="minLogo" key="min-logo" />
7        </div>
8      </side-menu>
9    </Sider>