Vue-cli项目与element导航菜单控件的结合使用以及遇到的问题

1、基本使用

第一种常用写法：导航菜单与 router-view 的配合使用

将所用的导航菜单数据编写成一个数组的形式，提高维护性；

在utils工具文件夹中建立utils.js文件；

import merge from 'webpack-merge'
/**
 * 工具类Class
 */
class testUtils {
    constructor() { }
    //当前默认语言
    static currentLang = 'zh-CN'
    //支持国际化语言
    static supportLangs = ['zh-CN', 'en-US']

    /**
     * [mergeI18nFiles 根据url里的language获取国际化文件]
     * @param  {[JSON]} i18nParams  [i18n参数]
     * @return {[JSON]}             [国际化配置]
     */
    mergeI18nFiles(i18nParams) {
        return require('@/pages/' + i18nParams.module + '/config/lang/' + i18nParams.lang + '/index')
    }
    /**
     * [getLanguageFromUrl 通过url里的language匹配当支持国际化的language,如果匹配到,返回匹配的language,匹配不到,返回默认language]
     * @return {[String]}               [匹配的language]
     */
    getLanguageFromUrl() {
        for (let val of adrsUtils.supportLangs) {
            let url = window.location.href
            let hashBackUrl = url.substring(url.indexOf('#/') + 2)
            const urlLang = hashBackUrl.substring(0, hashBackUrl.indexOf('/'))
            if (adrsUtils.supportLangs.includes(urlLang)) {
                return urlLang
            } else {
                return adrsUtils.currentLang
            }
        }
    }
}

export default new testUtils()
export { testUtils }

View Code

在app.js文件中引入国际化：

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import testUtils from '@/utils/utils'
Vue.use(VueI18n)

//获取url中的language
const language = testUtils.getLanguageFromUrl()
//根据url里的language动态加载language配置文件
let i18nParams = { module: 'index', lang: language }
const messages = testUtils.mergeI18nFiles(i18nParams).default
const i18n = new VueI18n({
    locale: language,
    messages
})

View Code

在global文件夹中，建立locale.js文件；

import testUtils from '@/utils/utils'
export default {
    install(Vue) {
        const language = testUtils.getLanguageFromUrl()
        Vue.$language = language
        Vue.prototype.$language = language
    }
}

在JS文件夹下面建立data.js文件；

import Vue from 'vue'
const language = Vue.$language
const testingLocale = require(`../../config/lang/${language}/testing_${language}`).default

//导航数据   title为导航的内容   iconName是导航图标
export const menuData = [
    {
        title: testingLocale[language].message.testing.test1,
        iconName: require('../../assets/images/test1.png'),
        route: {
            path: 'test1',
        },
    },
    {
        title: testingLocale[language].message.testing.test2,
        iconName: require('../../assets/images/test2.png'),
        route: {
            path: 'test2',
        },
    }
}

View Code

在导航菜单中进行循环；

 <el-menu
       :default-active="defaultActive"
        router
        class="el-menu-vertical-demo"
        @select="selectRouter"
 >
     <el-menu-item
         :index="value.route.path"
         v-for="(value, index) in menuData"
         :key="index"
      >
        <img :src="value.iconName" style="28px;height:25px;margin:0 0.5rem" />
        <span slot="title">{{value.title}}</span>
     </el-menu-item>
</el-menu>

在data属性中设置默认的打开菜单；

 defaultActive: "test1", //默认开启导航

在点击菜单的时候，如果存在跳转的条件，可以添加select事件

/**
 * [selectRouter 菜单栏选择时的回调  否则可能无法跳转过去]
 * params  index 选中的菜单路径   是一个字符串
 * params  indexPath 选中的菜单路径   是一个数组
 * @return {[type]} [description]
*/
  selectRouter(index, indexPath) {
  //未对路由跳转的提交进行限制
    router.beforeEach((to, from, next) => {
      
    });
 },

View Code

第二种：导航菜单与子组件的配合使用

同样将数据提取出来，设置数组的形式

export const menuData =
    [
        { //导航
            index: 'register',
            name: "导航一",
            children: [{ index: 'register', name: '选项一' }],
            imgsrc: require('@/pages/index/assets/images/home/register.png')
        }, {
            index: 'mediationCase',
            name: "导航二",
            imgsrc: require('@/pages/index/assets/images/home/auditing.png'),
            children: []
        }
    ]

View Code

在vue中进行循环

<el-menu
       class="el-menu-vertical-demo"
       router
       :default-active="activeIndex"
       unique-opened
       text-color="#fff"
>
      <div v-for="item in menuData" :key="item.index">
      <el-menu-item
           :index=" '/' + $route.params.language + '/home/' + item.index"
           v-if="item.children.length == 0"
      >
          <img :src="item.imgsrc" width="18px" />
          <span slot="title" style="padding-left: 0.5rem;">{{item.name}}</span>
      </el-menu-item>
      <el-submenu :index="item.index" v-if="item.children.length > 0">
           <template slot="title">
             <img :src="item.imgsrc" width="18px" />
             <span style="padding-left: 0.5rem;">{{item.name}}</span>
           </template>
           <el-menu-item-group>
               <div v-for="i in item.children" :key="i.index">
                 <el-menu-item
                    :index=" '/' + $route.params.language + '/home/' + i.index"
                 >{{i.name}}</el-menu-item>
               </div>
          </el-menu-item-group>
       </el-submenu>
   </div>
</el-menu>

View Code

不采用router-view，而采用子组件进行匹配
```
<test v-show="defaultActive == 'test'"></test>
```

2、遇到的问题

在使用elementUI构建vue项目的时候会遇到，页面刷新的时候路径为刷新之前的子路由，内容也为刷新之前的子路由内容，但是导航栏的高亮却显示在data属性中设置的默认导航栏上；
- 解决方法：在mounted钩子函数中，添加以下代码
```
this.defaultActive = window.location.hash.split("/")[3];
```
  这样在渲染之前先把当前的路由设置给导航栏的默认的路由，则刷新也是显示的当前路由的内容，并且导航栏高亮的也是当前路由的那个选项了
在使用Element UI 时点击同一个路由，控制台报错，错误信息如下

- 解决方法：
  - 经过多次尝试发现原因可能是在重新下载依赖包时，安装的vue-router还是之前出错的那个版本，解决方法也很简单，在项目目录下运行 npm i vue-router@3.0 -S 即可；
  - 在引用vue-router的文件中添加以下代码
```
// 解决在使用Element UI 时点击同一个路由，控制台报错的问题
const originalPush = Router.prototype.push;
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err);
};
```