element-UI 左侧菜单栏保持刷新后还是选中状态

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

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

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #elementui #刷新路由 #默认路由 #vue路由

vue 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一种在使用Element UI框架时，如何通过设置<el-menu>组件的属性来确保在页面刷新后仍能保持菜单项的选中状态。具体实现包括利用Vue的$route.path属性来动态设置default-active值，以及使用exact属性来精确匹配路由。

刷新页面保持当前选中状态

<template>
    <div>
        <!-- :default-active="$route.path" 表示选中当前路由 -->
        <!-- router表示路由一致 -->
        <!-- exact 导航 切换问题, 切换到别的路由的时候,激活样式都一直存在的 -->
        
        <el-menu :default-active="$route.path"  class="el-menu-vertical-demo" exact   router>
            <navItem v-for="(n,index) in menu" :key="index" :menu="n"  />
        </el-menu>
    </div>
</template>