NavMenu 导航菜单 页面刷新 还是选中当前页

最新推荐文章于 2024-01-02 10:29:27 发布
最新推荐文章于 2024-01-02 10:29:27 发布
阅读量565 收藏
点赞数
分类专栏： elmentui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38686150/article/details/112366326
版权 
<el-menu
      default-active="$route.path"   //当前激活菜单的 index
      exact // 精确匹配
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>导航一</span>
        </template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">选项4</template>
          <el-menu-item index="1-4-1">选项1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">导航二</span>
      </el-menu-item>
      <el-menu-item index="3" disabled>
        <i class="el-icon-document"></i>
        <span slot="title">导航三</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title">导航四</span>
      </el-menu-item>
    </el-menu>
  • default-active="$route.path"
  • exact 精确匹配
du_独孤九剑
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
json标准格式举例_json几个小例子
weixin_42511491的博客
12-24 2万+
JSON(JavaScript Object Notation,JS对象标记)是一种轻量级的数据交换格式。目录1、json的格式2、JSONObject的使用3、本来想好好做来着，但是网上不少了就不献丑了，一下是他们的。(http://www.cnblogs.com/hitwtx/articles/2468633.htmlhttp://blog.csdn.net/u012385190/articl...
el-menu导航选中后刷新页面保持当前选中
qq_45939795的博客
12-08 1215
在路由中配置name属性,name的值就是el-menu-item里面index值 绑定一个自定义属性,用来控制菜单. 刷新后就能保持被选中的状态了 第一次写随笔记录,大神勿喷!
json数据格式常见操作示例
12-09
本文实例讲述了json数据格式常见操作。分享给大家供大家参考，具体如下： json数据格式 第一种，对象形式 [removed] //var json3={name:"longzhoufeng",age:123}//第一种方式 var json3={"name":"longzhoufeng","age":123}//推荐这种方式，加引号，安全性高一点，转换格式好一些 for( var attr in json3){ //alert(attr)//name,age console.log(json3[attr])//longzhoufeng,123 } [removed] 运行结果：
JSON使用示例
ligare的博客
06-21 1万+
1——什么是json?JSON，说白了就是JavaScript用来处理数据的一种格式，这种格式非常简单易用。JSON支持的语言非常多，包括JavaScript、C#、PHP、Java等等，这是由于JSON是独立于语言的轻量级的数据交换格式。2——json的两种格式：1.对象结构（键值对）无序对象结构是使用大括号“{}”括起来的，大括号内是由0个或多个用英文逗号分隔的“关键字:值”对（key:value）构成的。语法： jsonObj指的是json对象。2.数组结构 有序JSON数组结构是用中括号“[]”
json的格式和简单例子
z2431435的博客
12-31 2万+
文章目录jsonObject格式例子jsonArray格式例子数组中的值也可以另一个数组，或者甚至另一个 JSON 对象 jsonObject 格式 (key/value)键值对形式存在的无序的jsonObject对象。 用{表示开始，用}表示结束。每个“key”后跟一个: 多组键值对之间使用逗号分隔。 key值必须要是string类型，而对于value，则可以是string、number、object、array等数据类型。 例子 { "error": 0, "status": "suc
JSON数据解析
保持热爱，奔赴山海。
01-03 2874
在建立该对象时需要提供一个参数，也就是括号中的参数capacity。这部分语句的作用是使用deserializeJson来对JSON文件进行解析。+30这些额外增加的数值是由于ArduinoJson库在解析信息时，需要额外的空间来复制JSON信息。使用了JSON_OBJECT_SIZE(2)这条指令。JSON字符串数据示例： "name" : "taichi-maker"这条语句的作用是建立字符串变量，改变里用于存储需要解析的JSON信息。“JSON数据名”：JSON数据值。
Element-Ui组件 NavMenu 导航菜单的具体使用
10-16
NavMenu是Element-UI中的一个核心组件，用于创建导航菜单，可以支持水平和垂直两种模式，适用于各种类型的应用场景。 ### 基础用法 1. **水平导航菜单**： 在水平模式下，`el-menu`组件可以通过`:default-active`...
Element NavMenu导航菜单的使用方法
10-15
Element UI的NavMenu导航菜单是前端开发中常用的一个组件，尤其在构建Web应用的侧边栏或顶部导航时。这个组件提供了丰富的样式和交互功能，能够帮助开发者快速创建出美观且易于使用的导航结构。 首先，让我们了解...
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
12-28
废话不说，上代码！ [$route.path]'> <span>nav 1 <router-link to='abou
Vue页面手动刷新,实现导航栏激活项还原到初始状态
10-14
在实际应用中，当用户通过导航在不同页面间切换时，通常希望保持导航栏的状态，如高亮显示当前选中的菜单项。然而，当页面被手动刷新时，由于Vue实例会被重新创建，这些状态可能丢失。为了解决这个问题，我们可以...
JSON实例操作
qq_44174346的博客
08-18 2557
< h2 > JavaScript 创建 JSON 对象 < p > 网站名称: < span id = " jname " > < br /> 网站地址: < span id = " jurl " > < br /> 网站 slogan: < span id = " jslogan " > < br />
Json格式数据解析
热门推荐
程序三两行
05-14 2万+
一、简介XML这种数据格式。XML的特点是功能全面，但标签繁琐，格式复杂。在Web上使用XML现在越来越少，取而代之的是JSON这种数据结构。JSON是JavaScript Object Notation的缩写，它去除了所有JavaScript执行代码，只保留JavaScript的对象格式。典型的JSON如下：json对象json对象数组json字符串JSON字符串也是在平时开发中使用较多的，json字符串应满足以下条件：1：它必须是一个字符串，由" "或者' '包裹数据，支持字符串的各种操作。...
json标准格式举例_json数据格式常见操作示例
weixin_35286433的博客
12-24 1615
本文实例讲述了json数据格式常见操作。分享给大家供大家参考，具体如下：json数据格式第一种，对象形式//var json3={name:"longzhoufeng",age:123}//第一种方式var json3={"name":"longzhoufeng","age":123}//推荐这种方式，加引号，安全性高一点，转换格式好一些for( var attr in json3){//aler...
快速入门：JSON 数据格式
m0_53157282的博客
09-25 376
JSON 是一种文本格式，用于描述结构化数据。它基于 JavaScript 的语法，但可以由许多其他编程语言进行解析和生成。JSON 使用键值对的形式组织数据，数据之间使用逗号分隔。恭喜！您已经学会了快速入门 JSON 数据格式的基础知识。JSON 提供了一种简单、灵活的方式来组织和交换数据。通过掌握 JSON 的基本数据结构和使用方法，您可以在前后端数据传输和存储过程中更加高效地处理数据。
JSON 的常见格式总结
最新发布
qq_58417838的博客
01-02 989
age”:2}{
Python基础：JSON保存结构化数据（详解）
Snailandfish的专栏
11-24 2415
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，也易于机器解析和生产。虽然JSON使用JavaScript语法来描述数据对象，但是JSON仍然独立于语言和平台，JSON解析器和JSON库支持许多不同的编程语言（C、Python、C++、Java、PHP、Go等均支持）。
json的数据格式
HappySSweet的博客
07-18 438
JSON（JavsScript Object Notation）是一种轻量级的数据交换格式，文本格式完全独立于语言，易于阅读和理解,也易于解析 JSON数据格式示例 例一：简单值对           { "id" : "1", "username" ： “liming”，“password”“：”123“} 例二：值为数组           { "id" : "1", "userna
vue-router + ElementUI实现NavMenu 导航菜单 选中状态的切换
06-02
要实现NavMenu导航菜单选中状态的切换，可以利用vue-router和ElementUI提供的组件。 首先，在路由配置中，可以给每个路由对象添加一个meta属性，用来标记该路由是否处于被选中状态，例如： ```javascript const routes = [ { path: '/home', component: Home, meta: { activeMenu: '/home' } }, { path: '/about', component: About, meta: { activeMenu: '/about' } }, //其他路由 ] ``` 然后，在NavMenu组件中，可以利用ElementUI提供的menu-item组件和router-link组件来实现菜单项和路由的绑定，例如： ```html <el-menu-item v-for="item in menuList" :key="item.path" :index="item.path" :route="{path: item.path}" :class="{'is-active': item.path === activePath}" > <i :class="item.icon"></i> <span slot="title">{{item.title}}</span> </el-menu-item> ``` 其中，menuList是一个包含菜单项信息的数组，activePath是当前选中的路由路径，可以在NavMenu组件中通过$route对象获取，例如： ```javascript data() { return { activePath: this.$route.path } }, watch: { '$route.path'(newVal) { this.activePath = newVal } } ``` 最后，在NavMenu组件的样式中，可以添加一个is-active类来设置选中菜单项的样式，例如： ```css .el-menu-item.is-active { color: #409EFF; background-color: #f5f7fa; } ``` 这样，就可以实现NavMenu导航菜单选中状态的切换了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值