iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >elementUI中MENU菜单踩坑
  • 772
分享到

elementUI中MENU菜单踩坑

2024-04-02 19:04:59 772人浏览 安东尼
摘要

需求:点击当前页面的按钮跳转到首页,给menu中绑定的default-active赋值 问题:页面已经跳转过去,可menu选中项根本没有发生变化 解决办法: 直接将当前页面的路由绑定

需求:点击当前页面的按钮跳转到首页,给menu中绑定的default-active赋值

问题:页面已经跳转过去,可menu选中项根本没有发生变化

解决办法: 直接将当前页面的路由绑定到default-active上,同时将index改为当前路由,这样在通过非点击导航菜单跳转页面时就不需要再来手动改变导航菜单的选中项了,它会自己选中当前页面的tab项,完美解决!

说明:router属性很重要,default-active="this.$route.path"也很重要。

<el-menu
        :router="true"
        :default-active="$route.name"
        class="el-menu-demo"
        mode="horizontal"
        @select="select"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
            <el-menu-item :route="{name: 'home'}" index="home">
                <template slot="title">
                    <Icon type="iOS-home"></Icon>
                    <span>首页</span>
                </template>
            </el-menu-item>
            
            <el-menu-item :route="{name: 'article'}" index="article">
                <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>文章</span>
                </template>
            </el-menu-item>
 
            <el-menu-item :route="{name: 'time'}" index="time">
                <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>时间轴</span>
                </template>
            </el-menu-item>
            
            <el-menu-item :route="{name: 'photo'}" index="photo">
                <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>生活照</span>
                </template>
            </el-menu-item>
            
            <el-menu-item :route="{name: 'footprint'}" index="footprint">
                <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>足迹</span>
                </template>
            </el-menu-item>
            
            <el-menu-item :route="{name: 'aboutme'}" index="aboutme">
                <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>关于我</span>
                </template>
            </el-menu-item>
 
            <el-menu-item :route="{name: 'message'}" index="message">
                <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>留言板</span>
                </template>
            </el-menu-item>
            <el-menu-item :route="{name: 'manage'}" index="manage">
                <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>后台管理</span>
                </template>
            </el-menu-item>
    </el-menu>

 到此这篇关于elementUI中MENU菜单踩坑的文章就介绍到这了,更多相关elementUI MENU菜单内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: elementUI中MENU菜单踩坑

本文链接: https://www.lsjlt.com/news/144937.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • elementUI中MENU菜单踩坑
    需求:点击当前页面的按钮跳转到首页,给menu中绑定的default-active赋值 问题:页面已经跳转过去,可menu选中项根本没有发生变化 解决办法: 直接将当前页面的路由绑定...
    99+
    2022-11-13
  • elementUI中MENU菜单的坑怎么解决
    这篇文章主要介绍了elementUI中MENU菜单的坑怎么解决的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇elementUI中MENU菜单的坑怎么解决文章都会有所收获,下面我们一起来看看吧。需求:点击当前页面...
    99+
    2023-06-29
  • elementUI表单验证踩坑问题怎么解决
    本文小编为大家详细介绍“elementUI表单验证踩坑问题怎么解决”,内容详细,步骤清晰,细节处理妥当,希望这篇“elementUI表单验证踩坑问题怎么解决”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。@char...
    99+
    2023-07-05
  • 总结elementUI表单验证的踩坑解决方法
    @charset "UTF-8";.markdown-body{word-break:break-word;line-height:1.75;font-weight:400;font-size:15px;overflow-x:hidden;...
    99+
    2023-05-14
    elementUI 前端 JavaScript
  • 详解Android中的Menu菜单键
    Android中的设置按钮:长按或点击菜单键 1.长按选项: 布局文件: <LinearLayout xmlns:android="http://schemas.a...
    99+
    2022-06-06
    Android
  • AntDesign Vue中Menu菜单怎么用
    这篇文章将为大家详细讲解有关AntDesign Vue中Menu菜单怎么用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。常用属性属性说明默认值mode菜单类型,现在支持垂直、水平、和内嵌模式三种verti...
    99+
    2023-06-22
  • vue动态菜单、动态路由加载以及刷新踩坑实战
    目录需求:思路:教训:分享正文:总结需求: 从接口动态获取子菜单数据 动态加载 要求只有展开才加载子菜单数据 支持刷新,页面显示正常 思路: 一开始比较乱,思路很多。想了很多 首先...
    99+
    2022-11-12
  • JAVA中简单的for循环异常踩坑
    目录引言踩坑操作foreach循环剔除方式下标循环操作正确方式迭代器方式Lambda表达式Stream流操作中间对象辅助方式引言 实际的业务项目开发中,大家应该对从给定的list中剔...
    99+
    2022-11-13
  • 简单聊聊Go for range中容易踩的坑
    目录前言1. for+传值2. for+传址3.for+闭包4. for+goroutine总结前言 为了让大家更好的理解本期知识点,先介绍以下几个知识点:线性结构、非线性结构、循环...
    99+
    2023-03-20
    Go for range踩坑 Go for range
  • 如何在Android项目中动态修改ToolBar中的Menu菜单栏
    如何在Android项目中动态修改ToolBar中的Menu菜单栏?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。Android动态修改ToolBar的Menu菜单实现很简单...
    99+
    2023-05-31
    toolbar android menu
  • Android 2.3.7.r1 camera录像过程中按menu菜单键时会停止录像
    Android 2.3.7.r1 按menu键时会停止录像。改成录像时按menu键不做处理,可做如下修改: 在packages/apps/CameraOpen/src/com/...
    99+
    2022-06-06
    Android
  • 解决elementui中NavMenu导航菜单高亮问题(解决多种情况)
    目录前言我在项目中遇到的情况有三种:(vue-cli+elementui)1、横向菜单2、纵向菜单3、嵌套式菜单代码实现1、横向菜单2、纵向菜单3、嵌套式菜单前言 如果使用eleme...
    99+
    2022-11-13
  • 在Android中创建菜单项Menu以及获取手机分辨率的解决方法
      在Activity中覆写下面两个方法: 代码如下:  // 创建菜单 @Override public boolean o...
    99+
    2022-06-06
    菜单 方法 分辨率 手机 Android
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作