Vue学习-组件之间跳转，右侧页面刷新，但左侧菜单栏选中状态未刷新

最新推荐文章于 2023-12-02 17:07:57 发布

原创最新推荐文章于 2023-12-02 17:07:57 发布 · 2.9k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

Vue 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一个前端应用中解决路由监听与菜单选中状态同步的问题。通过遍历菜单列表，匹配当前路由，并更新导航栏和面包屑路径。同时，监听路由变化以保持侧边菜单的选中状态，并在菜单数据变化时初始化菜单数据。此解决方案确保了用户在页面跳转时，界面元素的状态能正确反映路由变化。

解决前图片:

在这里插入图片描述

解决方法: 在嵌入菜单的组件中添加路由监听

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();
  },
}