elementui框架里导航菜单的default-active的作用 v-for里key的意义

本文介绍ElementUI框架中NavMenu导航菜单的使用方法,重点解释了default-active属性的作用及使用技巧,包括如何处理多层嵌套路由以确保浏览器刷新后仍能定位到正确的路由。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在elementui框架中,

    有一个名字为NavMenu导航菜单的空间,其中在菜单上的属性值default-active,它的说明内容为:当前激活菜单的 index

    其实,即使不加这个属性,也能正常显示选中的item变亮,但是之所以要加这个属性,是为了浏览器刷新后,仍然可以定位到之前选中的路由。

      如果没有多层嵌套路由的话,可以令:default-active="$route.path",但是如果有多层嵌套,建议在计算属性里,更新数据,如下所示:

computed: {
        defaultActive() {
            return '/' + this.$route.path.split('/').reverse()[0];
        }
    }


v-for里,包括与此类似的指令里,都需要绑定key,是因为这里的key用于elementui框架里重新渲染定位,如果没有,轻则重新渲染全部数组内容,重则报错。并且,最好不要绑定index,否则述责更新的话,会重新渲染全部的内容,最好能使用独一无二的id。

       

### 使用 ElementUI 实现商城菜单 #### 创建基础结构 为了构建一个适合商城应用的菜单,可以采用 `el-menu` 和其子组件来搭建基本框架。通过设置不同的属性,能够自定义菜单的行为和外观。 ```html <div id="app"> <el-container> <el-aside width="200px"> <!-- 菜单 --> <el-menu default-active="1" 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>商品分类</template> <el-menu-item-group title="服装类"> <el-menu-item index="1-1">男装</el-menu-item> <el-menu-item index="1-2">女装</el-menu-item> </el-menu-item-group> <el-menu-3">手机</el-menu-item> <el-menu-item index="1-4">电脑</el-menu-item> </el-menu-item-group> </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"> <i class="el-icon-setting"></i><span slot="title">会员中心</span> </el-menu-item> </el-menu> </el-aside> <el-main>Main Content Area</el-main> </el-container> </div> ``` 这段代码展示了如何使用 `el-menu`, `el-submenu`, 及 `el-menu-item` 来创建一个多层嵌套的商品分类导航条[^1]。 #### 添加交互逻辑 为了让菜单更加实用,在实际项目中通常还需要添加一些事件处理函数用于响应用户的点击动作: ```javascript new Vue({ el: '#app', methods: { handleOpen(key, keyPath) { console.log('opened', key, keyPath); }, handleClose(key, keyPath) { console.log('closed', key, keyPath); } } }); ``` 此部分实现了当用户打开或关闭某个子菜单时触发相应的回调方法并打印日志信息到控制台。 #### 数据驱动动态渲染 对于大型电商网站来说,静态编写的菜单显然不够灵活;因此可以通过数据绑定的方式让菜单支持动态更新。假设存在如下 JSON 结构的数据源表示各级别的菜单项列表,则可以根据这些数据来自动生成整个侧边栏的内容。 ```json [ { "index": "1", "title": "商品分类", "children": [ {"groupTitle": "服装类", items:[{"label":"男装"},{"label":"女装"}]}, {"groupTitle": "数码产品", items:[{"label":"手机"},{"label":"电脑"}]} ] }, ... ] ``` 接着修改之前的 HTML 模板以适应新的需求: ```html <el-submenu v-for="(menuItem, idx) in menuItems" :key="idx" :index="menuItem.index"> <template slot="title">{{ menuItem.title }}</template> <el-menu-item-group v-if="menuItem.children && menuItem.children.length > 0" v-for="(childGroup, gIdx) in menuItem.children" :key="'g'+gIdx" :title="childGroup.groupTitle"> <el-menu-item v-for="(item,i) in childGroup.items" :key="'mi-'+i" :index="`${menuItem.index}-${i}`">{{ item.label }}</el-menu-item> </el-menu-item-group> </el-submenu> ``` 这样就可以轻松地根据传入的不同配置文件调整显示出来的具体选项了[^3].
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值