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

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>