关于vuecli3.9项目使用vuex解决elementUI刷新页面后导航栏高亮与页面不匹配的问题

1.问题描述

               问题1：在使用默认普通字符去匹配的情况时，导航页面在不刷新是图标高亮正常，

                             但刷新后高亮由于受到 default-active 默认值的影响，高亮与显示页面不匹配。

                 问题2：在使用$route.path的情况下，el-menu-item  的index值设为url固定的url值时，若url没有添加等改变时，

                               能正常运行，但是若某一页的url在后面业务中增加了（如原来是/home/abc  后面由于各种原因变成了 /home/abc/page ），则高亮会再一次失效。

 

2.解决思路

                利用不同页面中的url具有特定的不同部分来进行与 el-menu-item 中的 index的值进行匹配，

　　  将path的值传入vuex中进行处理。在vue页面的create中传path值到mutations中进行字符串处理，

        将处理结果赋值到state中事先定义的变量中，vue页面中的create() 会获取该值并赋值到data中与

                 default-active="xxx"   绑定的变量

 

                                      

 

                                                                                  图1.1 大致思路图

 3.具体实现方式

                          vue页面导航的菜单处，default-active绑定的是data中的navParameter。

                index中的值命名要与url中的有关(后面vuex传值过来会进行高亮与页面的匹配)  

     

                                                            图 1.2 vue页面菜单栏部分

               

              vue页面data部分与create函数部分，create中传path到vuex中，并处理vuex传来的值

        

                                                           图 1.3  vue页面的data与create部分

代码：

  data () {
    return {
      navParameter: ''
    }
  },
  created () {
    this.$store.commit('navParameterCal', this.$route.path)
    this.$data.navParameter = this.$store.state.navParameter
  },

 

4.vuex页面

                                                          

                                                                                 图 1.4 state部分

 

                                

                                                             图 1.5  mutations部分，vue页面传来的值处理过程

                               我这里传过去的url中favorites与是其中一个导航栏有关，经过处理后将state中的值"navParameter" 改变，

                这个值会传到vue页面中，在执行create时会将vue页面中的data中对应的值改变，渲染时高亮就会匹配相关页面，即

                使刷新也不会出现高亮与所在页面不匹配的情况。

navParameterCal (state, navUrl) {
      const navUrlList = navUrl.split('/').filter((item) => { return item !== '' })
      if (navUrlList.length <= 1) {
        state.navParameter = navUrlList[0]       //将处理后的值赋值给state中的navParameter
      } else {
        state.navParameter = navUrlList[1]       //同上
      }
    },

                                 

                                  地址栏url与传入mutations中的处理情况(这里根据自己的url处理，我的url在home页面时只有/home ，没有后面的值，所以加了个if判断)             

                                     

                                                                     图 1.6 地址栏url与mutations

 

 

 

5.el-menu-item的index值与path处理后传后来的值

 

                     mutations中处理得到的值要有与菜单中index里的值有对应的，与path也要有对应的部分，

          即使后期url后面被添加其他值对导航也不会有影响，index中的命名也要选择url中唯一的部分                  

                                                     

 

 

                                                           图 1.6 index的命名

 

 6.总结

                                 当应用场景不复杂时可以用    :default-active="$route.path"     index直接设置成固定的url也能顺利匹配。

                                 能实现本文效果的方式很有，搭配watch应该也能实现，具体我也没去试过。

                                                                  本文有错误的地方感谢指正