在这里插入图片描述
问题:左侧菜单,选中状态失效,1.路由跳转过来,选中失效;2.刷新页面失效

解决方法

1.路由跳转(NavMenu子菜单没有v-if)+刷新
app.vue

//html
<el-menu
   router
   ref='menu'
   :default-active='$route.path' //刷新
   class="el-menu-vertical-demo"
   background-color="#002140"
   text-color="#fff"
   active-text-color="#ffd04b">

   <el-submenu index="1">
     <template slot="title">
       <i class="el-icon-cold-drink"></i>
       <span>米粒姐</span>
     </template>
       <el-menu-item index="/CallList">通话回推记录</el-menu-item>
       <el-menu-item index="/CallRecordList">通话记录</el-menu-item>
   </el-submenu>
 </el-menu>

//js
  watch: {
    $route() {
      let i = this.$route.path;
      setTimeout(() => { //路由跳转
        this.$refs.menu.activeIndex = i
      }, 100)
    }
  }

2.路由跳转(因为NavMenu有些子菜单会加上v-if,权限控制时候经常发生)+刷新

//html
<el-menu
   router
   ref='menu'
   :default-active='$route.path' //也可以注销 刷新
   class="el-menu-vertical-demo"
   background-color="#002140"
   text-color="#fff"
   active-text-color="#ffd04b">

   <el-submenu index="1">
     <template slot="title">
       <i class="el-icon-cold-drink"></i>
       <span>米粒姐</span>
     </template>
       <el-menu-item index="/CallList">通话回推记录</el-menu-item>
       <el-menu-item index="/CallRecordList">通话记录</el-menu-item>
   </el-submenu>
 </el-menu>

//js
mounted () {
    setTimeout(() => { //刷新
        this.$refs.menu.defaultActive = localStorage.getItem('index')
      }, 100)
  },
  watch: {
    $route() {
      let i = this.$route.path;
      localStorage.setItem('index',i) //刷新
      setTimeout(() => { //路由跳转
        this.$refs.menu.activeIndex = i
      }, 100)
    }
  }
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐