CRMEB开源版后台前端主页高亮问题 - 文章

最近在使用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行。