elementui 可伸缩侧边栏_Vue Element-UI 侧边栏高亮

我们在使用 vue + element 写后台管理模板时，肯定逃不过左侧菜单也称侧边栏。

举例：我们现在有一个 A 模块，A 模块中有详情页面和编辑页面【一共三个页面】，我们通常怎么考虑？将三个页面写在一个 vue 里，通过 v-if 等切换展示，使用一个路由。

写成三个 vue ，在 A 模块中引入编辑和详情，再注册和使用，使用一个路由。

写成三个 vue ，在路由里注册三个，通过切换路由实现，使用三个路由。

下面我们分析下这三种方式：

第一种：将三个页面写在一个 vue 里，导致代码量太大，过于臃肿，后期不好维护。

第二种：假设我们在详情页面刷新，我们当然期望还是停留在详情页而不是回到 A 模块，所以用组件包裹的形式不适合，如果是弹框可是刷新后关闭，如果是页面这样不合理。第一种也存在这个问题。

第三种：使用三个路由，各页面分开，刷新时互不干扰。

这样看来第三种会比较好，但是这样会遇到一个问题，当我们切换到详情页或编辑页时我们是期望 A 模块高亮，而不是取消高亮

element-ui 也给我们提供了一个属性 default-active

呀，看这个描述很是头痛啊，说的这是啥啥啥！完全看不懂，求助下度娘

度娘反馈回来的文章中说道

我之前并不是这么写的，我是在 route 的 meta 中加的配置，我看到这么简单就去试了试，发现还挺好用。看着貌似没有问题，但是当你直接在浏览器输入 url 时并不会更新过来【场景：当前 B 模块高亮，在 url 中输入一个 A 模块下的路由地址，虽然页面内容是正确的但是左菜单高亮不正确】

下面介绍我的方法：

首先在 route 的 index.js 中给需要改变高亮的路由增加 GuidePath 和 JumpPath 字段，GuidePath 表示当前路由高亮指向不是本身，JumpPath 表示高亮指向的路由企业注册、公司详情、编辑信息的高亮全部指向企业管理页面

然后在左菜单组件写 计算属性并赋值给 default-active属性

这样就大功告成了~

有人该有疑问了，为什么写在计算属性里？

因为左菜单作为一个组件被引入app.vue中只实例化一次，当我们切换路由的时候左菜单组件并不会被重新调用，所以我们需要计算属性实时监听，写在 watch 中也可以，但是写在计算属性中代码量比较少一行代码通俗易懂。实时的作用就是解决 url 输入也能改变高亮的问题。

感觉不错点个 赞留个关注吧。都是实战经验的干货哦~

你之前碰到这种问题是怎么样解决的呢？或者有什么更好的方法，欢迎评论，一起交流进步~