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、

<Sider hide-trigger  breakpoint="md" collapsible :collapsed-width="200"  :style="{background: '#fff',marginTop:'30px'}">
          <Menu :active-name="shop" ref="shop" theme="light" width="auto" :open-names="['1']">
            <MenuItem name="shop-list" to="/shop-list">店铺列表</MenuItem>
            <MenuItem name="shop-add" to="/shop-add">店铺添加</MenuItem>
          </Menu>
</Sider>

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的值，当然，其它的方法也都大同小异，有思路就有办法哈，如果看到的您有更好的办法，欢迎下方留言分享，如果您有什么没有看懂的地方也可以留言提问，我会非常乐意帮您解疑答惑哦