首页 > 技术文章 > 切换菜单,两个单页面展现相同,实时更新数据操作,监听路由和监听store数据

lhjfly 2019-11-04 15:20 原文

一些菜单业务逻辑的处理,在此记录一下:

业务场景:两级菜单,头部导航显示主菜单(公司),左侧菜单树(报表展现),通过主菜单选择一级菜单渲染左侧二级菜单,不同的公司可能存在相同(显示)的单页面,此时需要监听路由或者监听$store.state中的数据

 一、路由不同,切换导航菜单,加载左侧菜单树,相同的单页面展现,但路由不同,此时监听路由

watch:{
  $route(to,from){
    console.log(to.path);
    //do something
  }
},

二、路由相同,切换导航菜单,加载左侧菜单树,相同的单页面展现,路由相同,此时监听导航菜单当前的菜单id,监听$store.state中的数据

computed: {
  currentId() {
    return this.$store.state.currentId;  //当前导航菜单的id
  }
},
watch: {
  currentId(newVal, oldVal) {
    //do something
  }
}

推荐阅读