CRMEB开源版后台前端主页高亮问题
CV工程师
2023-09-09 10:01:43 阅读：72
最近在使用CRMEB二开时发现一个有趣的小问题，就是后台前端页面点击菜单以后再点击主页菜单主页菜单不会高亮
不想看过程的可以直接翻到最下方看解决方案！ 不想看过程的可以直接翻到最下方看解决方案！ 不想看过程的可以直接翻到最下方看解决方案！
问题
打开后台以后主页默认高亮（没有问题）：
点击其它菜单（例如点击用户），高亮依然没有问题：
可是当再次点击主页时主页不会高亮，并且浏览器会报错：
查找原因：
解决报错
根据报错信息：
vue.esm.js:5105 [Vue warn]: Error in callback for watcher "$route": "TypeError: Cannot read properties of undefined (reading '0')"
found in
---> <LayoutColumnsAside> at src/layout/component/columnsAside.vue
<ElContainer> at packages/container/src/main.vue
<LayoutColumns> at src/layout/main/columns.vue
<Layout> at src/layout/index.vue
<App> at src/App.vue
<Root>
=====================================================================
vue.esm.js:3767 TypeError: Cannot read properties of undefined (reading '0')
at VueComponent.handler (columnsAside.vue:191:1)
at invokeWithErrorHandling (vue.esm.js:3735:1)
at Watcher.run (vue.esm.js:4252:1)
at flushSchedulerQueue (vue.esm.js:3226:1)
at Array.eval (vue.esm.js:3861:1)
at flushCallbacks (vue.esm.js:3783:1)
不难看出在src/layout/component/columnsAside.vue文件下的第191行代码报错了：
从这里可以看出应该就是这个resData里面没有对应的信息导致的，我打印了一下，发现是个空对象:{}，为了暂时不报错，我现在有两个选择，一个是使用 try...catch 捕获已成，一个是直接注释掉，这里我图省事直接注释掉以后不报错了，然后发现高亮问题还是存在，那么就直接查找高亮代码吧。
高亮问题
最初我找的 layout-columns-active：
后来发现没什么用，并不会高亮，好在 columnsAside.vue 内的页面相关的代码不多：
<div ref="columnsAsideActiveRef" :class="setColumnsAsideStyle"></div>
这段代码看起来和高亮有关，毕竟有个 Active，于是直接注释掉这行代码，发现无法高亮了：
好消息，既然如此，只需要顺藤摸瓜即可。
这行代码里有两个变量: columnsAsideActiveRef 和 setColumnsAsideStyle, 其中 setColumnsAsideStyle 的代码为：
// 设置分栏高亮风格
setColumnsAsideStyle() {
return this.$store.state.themeConfig.themeConfig.columnsAsideStyle;
},
那这条线索就中断了，没啥可以查下去的必要了，同时也确定了问题就在 columnsAsideActiveRef 上：
从代码中很容易看出这几个函数一个套一个的，我最开始以为是变量 k 的问题，于是打印k后发现当点击主页时并不会调用 setColumnsAsideMove 函数，于是我一层一层向上找，发现问题所在：
图片中下方的try...catch注释为我临时处理问题的一种方式，但是并不推荐这种处理方式。
解决问题
这里调用 setColumnsAsideMove 时用的是resData里面的k，但是很明显resData是空的呀，所以这里的if加个else就好了：
即将 if (resData.item) this.onColumnsAsideDown(resData.item[0].k); 更换成如下代码：
if (resData.item) {
this.onColumnsAsideDown(resData.item[0].k);
} else {
this.onColumnsAsideDown(0);
return
};
为了方便直接看答案的同学，这里说明这个文件在 src/layout/component/columnsAside.vue 的第190行。
评论