vue3 使用element-ui的el-menu刷新之后保持选中状态

前端小云儿

已于 2024-02-27 17:57:38 修改

阅读量1.3k

点赞数 10

分类专栏： vue3知识点文章标签： vue.js javascript 前端

于 2024-02-26 10:22:25 首次发布

本文链接：https://blog.youkuaiyun.com/jieweiwujie/article/details/136293144

版权

vue3知识点专栏收录该内容

88 篇文章 ¥39.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了在Vue3中使用Element-UI的el-menu组件，如何在页面刷新后保持菜单选中状态。通过结合$route.path设置`:default-active`属性，并在mounted生命周期钩子中保存当前路径到sessionStorage。同时，使用watch监听activeIndex变化，确保手动输入路由时也能正确显示选中状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最简单的写法，引入$route.path 如果报错先引入定义

:default-active="$route.path"

 <el-menu
        class="el-menu-vertical-demo"
        :collapse="homeStore.isCollapse"
        background-color="#001529"
        text-color="white"
        active-text-color="yellowgreen"
        :router="trueValue"
        :default-active="$route.path"
        @select="handleSelect"
      >

<script setup>
import { appSource } from '../../utils/app.js'
import { Calendar, Timer, TakeawayBox } from '@element-plus/icons-vue'
import { useRouter, useRoute } from 'vue-router'
impor

了解本专栏