关于element-plus中el-menu或者el-menu-item导致无法跳转问题或者无法路由或闪动问题解决方法

最新推荐文章于 2024-09-16 19:54:33 发布

深入技术了解原理

最新推荐文章于 2024-09-16 19:54:33 发布

阅读量1.3w

点赞数 14

分类专栏： idea vue 文章标签： javascript html

本文链接：https://blog.csdn.net/weixin_45917610/article/details/120867441

版权

idea 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

vue

5 篇文章 2 订阅

订阅专栏

"这篇博客主要讨论了一个Vue.js应用中菜单导航的问题，即点击首页按钮没有触发跳转，而其他菜单项正常工作。问题出在首页的`el-menu-item`缺少了`router`属性。解决方案是为首页的菜单项添加正确的路由配置，如`index="/"`。同时，作者提醒在使用子菜单时要注意每个菜单项的唯一标识`index`，不设置会导致页面闪烁。参考链接提供了更多关于Vue.js路由的详细信息。"

摘要由CSDN通过智能技术生成

原本界面:我出现的点击首页没有跳转，而点击其他的就跳转
在这里插入图片描述

原本的代码：
在这里插入图片描述
下面展示一些 内联代码片。

  <el-menu
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b"
            >
                <el-menu-item index="/">
                    <i class="el-icon-s-marketing" style="vertical-align: 0px;"></i> 首页
                </el-menu-item>
            </el-menu>
            <el-col :span="2">
                <el-menu
                        :default-active="this.$route.path"
                        router mode="horizontal"
                        class="el-icon-add-location"
                        @open="handleOpen"
                        @close="handleClose"
                        background-color="#545c64"
                        text-color="#fff"
                        active-text-color="#ffd04b">
                    <el-submenu>
                        <el-menu-item index="/admin/index"><i class="el-icon-s-platform"></i>个人中心</el-menu-item>
                        <el-menu-item index="/tsgadmin/index"><i class="el-icon-s-platform"></i>消息中心</el-menu-item>
                        <el-menu-item index="/user/index"><i class="el-icon-s-platform"></i>退出登陆</el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-col>

解决方法：主要问题是第一个忘记在el-menu没有加入router，正确代码：我这里只截图出错的部分
在这里插入图片描述
同时也要注意：，一定要加上标号index=“1”,否则回会闪动。标号可以1、2…等
可以参考另一个博文：链接: https://blog.csdn.net/weixin_42565137/article/details/91909055.