Vue学习-组件之间跳转,右侧页面刷新,但左侧菜单栏选中状态未刷新
解决前图片:解决方法: 在嵌入菜单的组件中添加路由监听select(m){this.menuList.forEach(element => {if(element.children.length > 0){element.children.forEach(child =>{if(child.path == m){this.selectMenu = child;ret
·
解决前图片:
解决方法: 在嵌入菜单的组件中添加路由监听
select(m){
this.menuList.forEach(element => {
if(element.children.length > 0){
element.children.forEach(child =>{
if(child.path == m){
this.selectMenu = child;
return;
}
})
}
});
this.$router.push(this.selectMenu.path);
//左侧导航栏菜单选中刷新
this.childActiveMenu = this.selectMenu.path;
//第一位必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。
//第二位必需。要删除的项目数量。如果设置为 0,则不会删除项目。
//第三位可选。向数组添加的新项目。
this.breadcrumbData.splice(0,1,this.selectMenu);
},
watch:{
// 监听路由变化 处理两个组件之间的相互跳转,右侧页面产生变化,但左侧菜单选中状态未刷新
$route(to, from) {
this.select(to.path);
},
//处理activeName生效,但是openNames不生效的情况
//运用Menu的updateopened方法:手动更新展开的子目录,注意要在 $nextTick 里调用。对openNames添加watch:
parentActiveMenu() {
this.$nextTick(() => {
this.$refs.side_menu.updateOpened();
this.$refs.side_menu.updateActiveName();
})
},
//监听菜单数据的变化'$store.state.users.routers' 固定写法
'$store.state.users.routers':function(){
this.initMenuData();
},
}
解决后图片:
更多推荐
已为社区贡献4条内容
所有评论(0)