iview menu 结合路由域计算属性改变菜单选中状态

前言

之前写的一篇自制手风琴模式的菜单文章，只能实现点击切换和刷新切换菜单项的选中状态，在用其他方式如this.$route.push跳转时，发现菜单并没有改变选中状态，这里记一下，法线用这里的方法比之前的更加简洁简单。

代码

html：actName是计算属性名，openName是data中的一个字段

:active-name='actName' :open-names="openName"

javascript

data: activeName:'1',//选中菜单项 openName:[],//子菜单展开 computed: actName(){ return this.choseItemByRouter() } ` methods: //根据路由获取选中状态 choseItemByRouter(){ var pathName=this.$route.path this.activeName=this.choseItemByRouter_eachList(this.siderLists,pathName) if(this.activeName.length>1){ this.openName=[this.activeName[0]] }else{ this.openName=[] } this.$nextTick(()=>{ this.$refs.menuList.updateOpened(); }) return this.activeName }, //根据路由获取选中状态---遍历选出path--name choseItemByRouter_eachList(obj,path){ var name=this.activeName for(var item of obj){ // 菜单项 if(item.children==undefined||item.children.length==0){ if(item.path==path){ name=item.name return name } }else return this.choseItemByRouter_eachList(item.children,path) } } //此处methods中的函数因为我数据的结构有点特书，取其精华就好