ElementPlus 侧边栏路由设置

wj1713520

已于 2022-03-22 22:41:29 修改

阅读量4.4k

点赞数 7

分类专栏： CSS Vue 文章标签： elementui vue.js javascript

于 2022-03-17 00:34:08 首次发布

本文链接：https://blog.youkuaiyun.com/wj1713520/article/details/123539783

版权

Vue 同时被 2 个专栏收录

12 篇文章

订阅专栏

CSS

11 篇文章

订阅专栏

在使用ElementPlus和Vue.js开发时，遇到侧边栏路由高亮与实际子路由页面不匹配的问题。文章指出，通过修改<el-menu>的props，添加`:default-active`属性，并在<el-menu-item>上设置`:index`为路由地址，同时在<script setup></script>中处理路由变化，可以解决刷新后侧边栏选中状态错误的问题。对于含有el-sub-menu的情况，需要更改el-menu-item的index而非el-sub-menu的index以匹配路由。

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

如果使用<router-link ></router-link>去包裹<el-menu-item></el-menu-item>会导致页面刷新之后，子路由页和侧边栏高亮文字的选中状态不匹配的问题！

例如：侧边栏选中‘详情页’之后，刷新浏览器，侧边栏的选中状态会变成‘首页’，但是子路由页依然停留在详情页！

按照以下代码修复：

<template>
  <el-menu
    active-text-color="#409eff"
    background-color="#7270F5"
    class="el-menu-vertical-demo"
    :default-active="route.path" //点击浏览器的前进后退，侧栏的高亮会和子路由页同步
    text-color="#fff"
    :router="true" //开启路由
  >
    <div class="logo">LOGO</div>
      <el-menu-item index="/Main" > //index指向路由页
        <el-icon><icon-menu /></el-icon>
        <template #title>首页</template>
      </el-menu-item>
      <el-menu-item index="/Detail"> //index指向路由页
        <el-icon><Document /></el-icon>
        <template #title>详情</template>
      </el-menu-item>
      <el-menu-item index="/Charts"> //index指向路由页
        <el-icon><setting /></el-icon>
        <template #title>图形</template>
      </el-menu-item>
  </el-menu>
</template>

<script setup>
import { Document, Menu as IconMenu, Setting } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'

const route = useRoute()
</script>

对ElementPlus官网版本进行修改的地方是：

1.el-menu的

//从
default-active="2"
//改为
:default-active="route.path"

2.el-menu添加了

:router="true"

3.el-menu-item的

//从
index="2"
//改为
index="/Main" //路由页的路径

4.<script setup></script > 内添加：

import { useRoute } from 'vue-router'
const route = useRoute()

5.如下图所示，现在刷新页面，子路由页显示详情页内容，左侧menu高亮文字停留在‘详情’ ，高亮文字不会跳转到‘首页’了。

6.注意！如果用到了el-sub-menu，应该将el-sub-menu内el-menu-item的index值更改为路由地址，而不是更改el-sub-menu的index值！