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 输入也能改变高亮的问题。

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

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

elementui 可伸缩侧边栏_Vue Element-UI 侧边栏高亮相关推荐

element ui 菜单封装_vue+element UI实现多级导航菜单
1.前言在某次日常开发中,项目要求页面的导航菜单需要动态加载,即菜单不能在页面上写死,菜单上的数据由后端开发从数据库中获取返回给前端使用,前端拿到数据后再通过解析数据最终将菜单渲染出来.由于菜单有可 ...
vue页面自适应屏幕宽高_Vue+Element UI 高度实时自适应
本文章是我一个实习两个月的练习生,在项目中遇到的问题,在此记录,防治以后再踩坑!! Element ui 本身使用的Container 布局容器,组件采用 flex 布局.所以用了它的布局就可以做到宽 ...
element表格实现树形全选_vue+element UI实现树形表格带复选框的示例代码
一:在component文件夹下新建如下treeTable文件夹,里面有2个文件: eval.js:将数据转换成树形数据 /** * @Author: jianglei * @Date: 2017-1 ...
element vue 上传模板_Vue Element UI upload 组件上传文件之后 file list 依旧是空数组
在 element ui 的 GitHub issue 中搜索了一下,发现 upload 组件确实不支持自动更新 file list,需要手动在上传成功和删除的回调中处理文件列表同步... 这个体验太 ...
element走马灯自动_vue Element UI走马灯组件重写
1.element ui走马灯组件 -- carousel 分析一波源代码: carousel/src/main.vue 文件为 el-carousel文件主要功能 carousel/src/item ...
Vue + Element UI——侧边栏LOGO设计DEMO
GitHub https://github.com/PanJiaChen/vue-element-admin DEMO https://panjiachen.github.io/vue-element ...
elementui上传图片加参数_Vue + Element UI使用富文本编辑器
第一步下载组件 npm install vue-quill-editor 第二步在需要使用的组件内引入· 富文本组件 import { quillEditor } from 'vue-quill-ed ...
dio 上传文件报错_Vue+Element UI实现断点续传、分片上传、秒传
作者:Pseudo 转发链接:https://segmentfault.com/a/1190000023434864 凡是要知其然知其所以然文件上传相信很多朋友都有遇到过,那或许你也遇到过当上传大文 ...
网站快速成型工具-Element UI
Element UI Element UI 1 什么是Element UI???? 2 搭建环境 2.1 创建vue项目 2.2 安装 element-ui组件 2.3 Element UI 引入 3 ...
vue2引入Element UI的详细步骤
目录一.Element UI介绍 Element UI的特点: vue3引入Element plus的文章: 二.操作步骤三.快速上手测试(可做可不做) 一.Element UI介绍 Elemen ...

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

elementui 可伸缩侧边栏_Vue Element-UI 侧边栏高亮相关推荐

最新文章

热门文章