最近前端项目上手没多久，就踩了一个小坑，一开始感觉还整挺好，随便点了点，，结果....
手欠刷新了一下浏览器，就发现对应的导航块高亮消失
这是怎么回事儿捏？代码如下 ：
<el-menu
:default-active="onRoutes" //根据返回路由的index 高亮
class="el-menu-vertical-demo"
background-color="#4a4d50"
text-color="#fff"
active-text-color="#00ffff"
:collapse="isCollapse"
:collapse-transition="false"
router
>
<!-- 一级菜单 -->
<el-menu-item
v-for="menu in menuList" // 遍历 menuList
:key="menu.path"
:index="menu.path" // 用path作下标
>
<!-- 图标 根据对应的menu.id获取对应的图标 -->
<i :class="iconsObject[menu.id]"></i>
<!-- 模板区 -->
<template slot="title">
<span>{{ menu.menuname }}</span>
</template>
<!-- <el-menu-item>
</el-menu-item> -->
</el-menu-item>
</el-menu>
</el-aside>
<!-- 主体 -->
<el-main><router-view></router-view></el-main>
</el-container>
</el-container>
</template>
<script>
import { getMenuList } from "../api/home";
export default {
data() {
return {
menuList: [
{ id: 1, menuname: "用户管理", path: "user" },
{ id: 2, menuname: "商品管理", path: "shop" },
{ id: 3, menuname: "订单管理", path: "order" },
{ id: 4, menuname: "数据统计", path: "data" },
],
iconsObject: {
1: "el-icon-s-custom",
2: "el-icon-s-cooperation",
3: "el-icon-s-order",
4: "el-icon-s-data",
5: "el-icon-setting",
},
// 是否折叠菜单
isCollapse: false,
// flag: "点我收起",
};
},
computed: {
// 动态返回对应的路由path
onRoutes() {
return this.$route.path;
},
},
找了半天发现，menuList中的 path 没有加 / ,修改后，问题解决
总结原因：由于 default-active 中 onRoutes计算属性返回的是带有 / 的path
而 index 绑定的是menuList中的path(无 / )，path不一致(判端不是同一个path)
导致浏览器刷新后，default-active无法根据对应path高亮显示
menuList: [
{ id: 1, menuname: "用户管理", path: "/user" },
{ id: 2, menuname: "商品管理", path: "/shop" },
{ id: 3, menuname: "订单管理", path: "/order" },
{ id: 4, menuname: "数据统计", path: "/data" },
],
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。