iview中刷新页面的时候更新导航菜单的active-name

浅浅的花香味﹌ 2022-05-11 12:36 128阅读 0赞

在做项目的时候，遇到一个问题，当刷新页面的时候，导航的激活菜单和当前显示的组件不匹配，查了一下官网（[https://www.iviewui.com/components/menu][https_www.iviewui.com_components_menu]），寥寥几句话就说完了，至于怎么实现没有详细说明

Menu methods:

> 方法名    说明    参数  
> updateOpened    手动更新展开的子目录，注意要在 $nextTick 里调用    无  
> updateActiveName    手动更新当前选择项，注意要在 $nextTick 里调用    无

所以下面就详细说明一下步骤：

1、在data中，定义一个变量shop:"shop-list"（值为菜单项的name，类似于默认值）

2、让 :active-name="shop"

3、给Menu添加ref属性，值为shop

4、当组件挂载的时候，更新active-name的值，注意：要在$nextTick里进行调用哦

说着有点抽象，所以，下面直接示例哈

1、

export default {
        name: "shop",
        data(){
          return {
            shop:"shop-list"
          }
        },
        mounted(){
          this.$nextTick(()=>{
            this.shop = this.$route.path.slice(1)
            this.$refs.shop.updateActiveName()
          })
        }
       
      }

注释：我上面的示例，是把菜单的name值设置成和路径一样的值，通过获取地址栏中的路径值，来动态的更新active-class的值，当然，其它的方法也都大同小异，有思路就有办法哈，如果看到的您有更好的办法，欢迎下方留言分享，如果您有什么没有看懂的地方也可以留言提问，我会非常乐意帮您解疑答惑哦

[https_www.iviewui.com_components_menu]: https://www.iviewui.com/components/menu