ElementPlus 侧边栏路由设置

2023-05-30 16:27| 来源: 网络整理| 查看: 265

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

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

按照以下代码修复：

LOGO //index指向路由页首页 //index指向路由页详情 //index指向路由页图形 import { Document, Menu as IconMenu, Setting } from '@element-plus/icons-vue' import { useRoute } from 'vue-router' const route = useRoute()

对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. 内添加：

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值！

【本文地址】

公司简介

联系我们