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 }

    • 在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
      })

    • 在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',
              },
          }
      }

  • 在导航菜单中进行循环；

     <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="width: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) => {
          
        });
     },

• 第二种：导航菜单与子组件的配合使用
  • 同样将数据提取出来，设置数组的形式

    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: []
            }
        ]

  • 在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>

  • 不采用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);
      };