elementUI中MENU菜单踩坑

 更新时间:2022年04月02日 15:56:43   作者:前端电气小白鼠  
本文主要介绍了elementUI中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菜单内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 手写vite插件教程示例

    手写vite插件教程示例

    这篇文章主要为大家介绍了手写一个vite插件教程示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • 基于vuex实现购物车功能

    基于vuex实现购物车功能

    这篇文章主要为大家详细介绍了基于vuex实现购物车功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-01-01
  • Vue3中引入Pinia存储库使用示例详解

    Vue3中引入Pinia存储库使用示例详解

    这篇文章主要介绍了Vue3中引入Pinia存储库使用,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-03-03
  • 详解Vue3 中的watchEffect 特性

    详解Vue3 中的watchEffect 特性

    这篇文章主要介绍了Vue3 中的 watchEffect 特性详解,watchEffect 是 Vue3 中非常有用的一个特性,它可以让我们轻松地监听响应式数据的变化,并在数据发生变化时执行指定的回调函数,从而简化代码并提高应用的性能,需要的朋友可以参考下
    2023-04-04
  • Vuex 命名空间 namespaced的使用

    Vuex 命名空间 namespaced的使用

    本文主要介绍了Vuex 命名空间 namespaced的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-03-03
  • vue导入excel文件,vue导入多个sheets的方式

    vue导入excel文件,vue导入多个sheets的方式

    这篇文章主要介绍了vue导入excel文件,vue导入多个sheets的方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • element--Diaolog弹窗打开之后渲染组件方式

    element--Diaolog弹窗打开之后渲染组件方式

    这篇文章主要介绍了element--Diaolog弹窗打开之后渲染组件方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • vue.js移动端app之上拉加载以及下拉刷新实战

    vue.js移动端app之上拉加载以及下拉刷新实战

    这篇文章主要介绍了vue.js移动端app之上拉加载以及下拉刷新实战,非常具有实用价值,需要的朋友可以参考下
    2017-09-09
  • element ui动态侧边菜单栏及页面布局实现方法

    element ui动态侧边菜单栏及页面布局实现方法

    后台管理系统经常会使用到一个左侧菜单栏,右侧Tab页的页面显示结构,这篇文章主要给大家介绍了关于element ui动态侧边菜单栏及页面布局实现的相关资料,需要的朋友可以参考下
    2023-09-09
  • vue项目中使用Svg的方法

    vue项目中使用Svg的方法

    本文主要以 vue-cli3 搭建的项目为例,来聊一下如何在项目中更优雅的使用 svg 。感兴趣的朋友跟随小编一起看看吧
    2018-10-10

最新评论