elementUI中NavMenu组件在特定条件下点击菜单项不切换页面并提示

项目中有大量可编辑的表单，每一个表单的项目也很多，如果没保存，切换菜单时已经填好的表单项就会被清空，因此需要在跳转菜单的时候弹出一个弹层，提醒用户切换会丢失已填的数据。

原本本地存了一个值editState，为true时表示为未保存的状态，此时需要一个提示框this.$confirm，确认离开时再走后面的逻辑

<el-menu 
   :router="false" 
   :default-active="activeId"  
   ref="asidMenu" 
   @select="selectMenu">
 <template v-for="(item, index) in MenuS">
       <el-menu-item :key="index" :index="item.id" @click="beforeCurrentMenu(item)">
        {{item.name}}
       </el-menu-item>
</el-menu>


methods: {
    beforeCurrentMenu(item) {
      let editState=JOSN.parse( window.localStorage.getItem('editState'))
      if (editState) {
        this.$confirm('当前页面内容尚未保存，离开将丢失已输入的数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.currentMenu(item)
          })
          .catch()
      } else {
        this.currentMenu(item)
      }
     },
     currentMenu(item) {
      this.activeId = item.id
      this.$router.push(item.path)
    }
}

实际上这样操作达到了页面没有跳转的效果，但是menu的default-active已经变成了点击之后的菜单，而不是当前路由下的菜单，激活项和页面不匹配，因此后面再切换菜单项，导致了整个菜单的激活状态紊乱

于是我想到了通过ref获取实例上的属性看看，menu的修改是在select事件上执行的，打印ref实例发现上面有两个属性activeIndex和defaultActive，必须要把两个都改掉才可以

  selectMenu() {
  let editState=JOSN.parse( window.localStorage.getItem('editState'))
      if (editState) {
        this.$refs.asidMenu.defaultActive = this.activeId
        this.$refs.asidMenu.activeIndex = this.activeId
      }
    },