vue导航菜单状态保存解决方案

通过在点击事件和路由钩子中将将要前往的页面索引保存到vueX中，并且该状态绑定到导航菜单上。

• 导航菜单模板

<el-menu :default-openeds="['1','2']" :default-active="menuIndex">
  <el-submenu index="1">
    <template slot="title">菜单</template>
    <el-menu-item-group>
      <el-menu-item index="0-0" @click="onMenuChange('feedback')">留言</el-menu-item>
      <el-menu-item index="0-1" @click="onMenuChange('feedbacklist')">留言列表</el-menu-item>
    </el-menu-item-group>
  </el-submenu>
  <el-submenu index="2">
    <template slot="title">运营管理</template>
    <el-menu-item-group>
      <el-menu-item index="1-0" @click="onMenuChange('notice')">闪屏公告</el-menu-item>
    </el-menu-item-group>
    <el-menu-item-group>
      <el-menu-item index="1-1" @click="onMenuChange('update')">版本更新</el-menu-item>
    </el-menu-item-group>=
  </el-submenu>
</el-menu>

• onMenuChange函数实现

onMenuChange (page, fromHook) { // 菜单状态缓存
  const indexs = [
    {
      'index': '0-0',
      'pages': ['feedback']
    },
    {
      'index': '0-1',
      'pages': ['feedbacklist']
    },
    {
      'index': '1-0',
      'pages': ['notice', 'addNotice']
    },
    {
      'index': '1-1',
      'pages': ['update']
    }
  ]

  for (var i = 0; i < indexs.length; i++) {
    const dic = indexs[i]
    if (common.isInArray(dic['pages'], page)) {
      this.$store.commit('changeMenuIndex', dic['index'])
      break
    }
  }

  if (!fromHook) {
    this.$router.push({
      name: page
    })
  }
}

• 全局路由钩子，监听浏览器前进后退

this.$router.beforeResolve((to, from, next) => {
  next()
  this.onMenuChange(to.name, true)
})
this.$router.afterEach((to, from) => {
  this.onMenuChange(to.name, true)
})

• 监听刷新页面

beforeRouteEnter: (to, from, next) => {
  next(vm => {
    vm.onMenuChange(to.name, true)
  })
}

• vueX

export const store = new Vuex.Store({
  state: {
    menuIndex: ''
  },
  mutations: {
    changeMenuIndex: (state, arg) => {
      state.menuIndex = arg
    }
  }
})

有疑问的请看demo