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行。
评论