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

在做项目的时候,遇到一个问题,当刷新页面的时候,导航的激活菜单和当前显示的组件不匹配,查了一下官网(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的值,当然,其它的方法也都大同小异,有思路就有办法哈,如果看到的您有更好的办法,欢迎下方留言分享,如果您有什么没有看懂的地方也可以留言提问,我会非常乐意帮您解疑答惑哦

你可能感兴趣的:(实战项目总结,vue)