element ui 中 el-menu 如何添加链接router-link标签

约定不等于承诺〃 2024-04-17 05:59 9阅读 0赞

在vue项目中，使用elementui 框架，做一个后台管理系统  
在写左边菜单，菜用了，elementui 提供的组件 ， el-menu 组件。但是组件没有链接，而我们知道添加链接使用router-link标签代码如下：

<el-menu-item :key="index" v-if="item.menuChilds.length==0" :index="item.menuUrl" >
                <i v-if="item.menuImgClass" :class="item.menuImgClass"></i>
                <router-link :to="item.menuUrl">
                <span slot="title">
                  pw_item.menuName
                </span>
                </router-link>
              </el-menu-item>

在span外包了一个router-link ， 链接没有问题，但是样式就出现问题了

**最后终于发现了，不用加router-link, 官网给出了使用方法**

1.  在el-menu 标签中，添加router属性（:router=“true” 或者直接 ）
2.  绑定index 为要跳转的路由，即可以进行正常的跳转，并且样式正常

<el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse" router>
            <template v-for="(item,index) in menulist" >
              
              <el-menu-item :key="index" v-if="item.menuChilds.length==0" :index="item.menuUrl" >
                <i v-if="item.menuImgClass" :class="item.menuImgClass"></i>
                <span slot="title">
                  pw_item.menuName
                </span>
              </el-menu-item>

发表评论取消回复

表情：

评论列表（有 0 条评论，9人围观）

还没有评论，来说两句吧...

相关阅读

相关 element ui 中 el-menu 如何添加链接router-link标签

vue项目中，使用elementui 框架，做一个后台管理系统在写左边菜单，菜用了，elementui 提供的组件， el-menu 组件。但是组件没有链接，而我...

约定不等于承诺〃/ 2024年04月17日 05:59/ 0 赞/ 10 阅读

相关 ln（添加链接）

【ln -s 源文件目标文件】英文原意：link 【ln -s /etc/issue /issue.soft】软链接：（类似win的快捷方式）文

偏执的太偏执、/ 2024年02月18日 19:03/ 0 赞/ 25 阅读

相关添加报名链接

未认证的微信公众号可以添加外部网址：任何外部网址都可以！一、提交网址，获取微外链路径。 1.首先进入微外链官方网站：https://uom.cn/a/ 点击右上角的

桃扇骨/ 2022年12月12日 15:18/ 0 赞/ 193 阅读

相关如何在公众号添加外部链接

如何向公众号添加的外部的链接呢？用普通的方法直接加入外链会被限制，但是我们可以借用工具实现添加外链的功能，如下： 1. 进入微信公众号后台，编辑素材的界面，找到并点击点

旧城等待，/ 2022年11月29日 11:44/ 0 赞/ 306 阅读

相关 html中p元素添加超链接_如何在HTML中添加超链接

html中p元素添加超链接 [How To Build a Website With HTML][] [如何使用HTML构建网站][How To Build a Websit

男娘i/ 2022年11月28日 15:21/ 0 赞/ 409 阅读

相关 element-UI——el-table添加序号

<el-table-column label="序号" type="index" width="

浅浅的花香味﹌/ 2022年10月17日 10:49/ 0 赞/ 197 阅读

相关 html5中如何添加超级链接

HTML 5 <a> 标签定义和用法 <a> 标签定义超链接，它用于从一个页面连接到另一个页面。 HTML 4.01 与 HTML 5 之间的差异在 H

灰太狼/ 2022年09月17日 05:27/ 0 赞/ 215 阅读

相关链接 标签

标签a一共有四个状态 hover 鼠标悬停在链接的状态 visited 链接被访问后的状态 active 链接被按下的时候的状态 link

末蓝、/ 2022年08月05日 05:26/ 0 赞/ 143 阅读

相关 element table动态添加标签

原始显示是这样的： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

红太狼/ 2022年04月14日 04:42/ 0 赞/ 405 阅读

相关 jeecms 链接标签

.引入页面 \[\include "../include/header-site.html"/\] 1 2.导航栏只有前两个带链接 \[\if c\_inde

曾经终败给现在/ 2021年11月14日 14:22/ 0 赞/ 220 阅读