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

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

• 导航菜单模板

  
    
    
      留言
      留言列表
    
  
  
    
    
      闪屏公告
    
    
      版本更新
    =
  

• 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