vue3.0 +element plus 实现页面刷新菜单栏保持选中状态

客官°小女子只卖身不卖艺 2023-01-20 13:58 437阅读 0赞

### Router ###

import { 
      createRouter,
      createWebHashHistory
    } from "vue-router";
    import Index from "../views/index/index.vue";
    import Login from "../views/login/login.vue"
    import Default from "../components/default.vue";
    import Adviser from "../components/adviser.vue";
    import NotFound from "../components/404.vue";
    import User from "../components/user.vue";
    import Competence from "../components/competence.vue";
    
    
    const routes = [{ 
        path: "/index",
        name: "Index",
        component: Index,
        children: [{ 
          path: '/user',
          component: User
        }, { 
          path: '/home',
          component: Default
        }, { 
          path: '/adviser',
          component: Adviser
        }, { 
          path: '/notFound',
          component: NotFound
        }, { 
          path: '/competence',
          component: Competence
        }]
      },
      { 
        path: "/",
        name: "login",
        component: Login,
      },
      { 
        path: "/about",
        name: "About",
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () =>
          import( /* webpackChunkName: "about" */ "../views/About.vue"),
      },
    ];
    
    const router = createRouter({ 
      history: createWebHashHistory(),
      routes,
    });
    
    router.beforeEach((to, from, next) => { 
    
      if (to.path === '/') { 
        $.ajax({ 
          url: "/user/logout",
          type: "post",
          dataType: "json",
          timeout: 2000,
          success: function (data) { 
            sessionStorage.removeItem("competenceUrl");
            router.replace('/');
          },
          //调用执行后调用的函数 请求完成后最终执行参数
          complete: function (XMLHttpRequest, textStatus) { 
            //超时,status还有success,error等值的情况
            if (textStatus == 'timeout') { 
              next('/');
            }
          }
        });
      }
      next();
    })
    
    export default router;

### 首页核心代码 ###

:default-active="activeIndex"  当前激活菜单的index

setCurrentRoute() { 
      this.activeIndex = this.$route.path; //关键 通过他就可以监听到当前路由状态并激活当前菜单
    }

假设 `activeIndex=‘/index’` 当 `el-menu-item :index` 也等于/index时选中

<el-menu-item v-for="competence in menu.competenceList" :index="competence.competenceUrl" :key="menu.id + '-' + competence.id" >
    </el-menu-item>

\*\*

<el-aside class="menubar">
              <el-menu router :default-active="activeIndex" class="el-menu-vertical-demo" :unique-opened="true" @select="handleSelect" >
                <el-submenu v-for="menu in menuList" :index="menu.id + ''" :key="menu.id" >
                  <template #title>
                    <i :class=" menu.iconValue == null ? 'el-icon-link' : menu.iconValue " ></i>
                    <span>{
       { menu.menuName }}</span>
                  </template>
                  <el-menu-item v-for="competence in menu.competenceList" :index="competence.competenceUrl" :key="menu.id + '-' + competence.id" >
                    <i class="el-icon-connection"></i>
                    <template #title>{
       { competence.competenceName }}</template>
                  </el-menu-item>
                </el-submenu>
              </el-menu>
            </el-aside>

export default { 
      data() { 
        return { 
          activeIndex: "/home",
          logo: require("../../assets/logo.png"),
          handlerUser: { 
            id: 0,
            username: "",
            userBase: { 
              img: "",
              nickname: "",
            },
          },
          menuList: [],
          competenceList: [],
        };
      },
      watch() { 
        this.setCurrentRoute();
      },
      methods: { 
        setCurrentRoute() { 
          this.activeIndex = this.$route.path; //关键 通过他就可以监听到当前路由状态并激活当前菜单
        }
        handleSelect(data) { 
          this.$router.replace({  path: data });
        },
      }
    };
    </script>