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

约定不等于承诺〃 2024-04-17 05:59 41阅读 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 条评论，41人围观）

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

相关阅读

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

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

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

相关超链接标签

![5d2dae599bc64173f64691e9bed60253.png][] <!DOCTYPE html> <html> <h

谁践踏了优雅/ 2023年10月03日 22:53/ 0 赞/ 39 阅读

相关链接标签（HTML）

链接标签（HTML） <!DOCTYPE html> <html lang="en"> <head> <meta charset=

清疚/ 2023年10月03日 12:22/ 0 赞/ 20 阅读

相关超链接标签

![a66703c099000a36acc597e269806291.png][] <!DOCTYPE html> <html> <h

秒速五厘米/ 2023年09月27日 13:38/ 0 赞/ 17 阅读

相关 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 赞/ 446 阅读

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

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

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

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

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

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

相关链接 标签

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

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

相关 element table动态添加标签

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

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

相关 jeecms 链接标签

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

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