Vue Element ui导航栏选中高亮,刷新后选中消失

这篇具有很好参考价值的文章主要介绍了Vue Element ui导航栏选中高亮,刷新后选中消失。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

侧边菜单

导航栏选中后重新刷新页面会发现选中的导航栏高亮消失了,或者跳到了其它选项,这里的思路就是定义方法,把路由存入到sessionStorage,页面重新加载的时候从sessionStorage中获取文章来源地址https://www.toymoban.com/news/detail-614036.html

<!--侧边菜单-->
         <el-menu :default-active="active" class="el-menu-vertical-demo" router>

            <router-link to="/user" style="text-decoration: none">
              <el-menu-item index="/user" v-if="isflag" @click="selectMenuItem('/user')"> 
                <el-icon><User /></el-icon>
                <span>User Information</span>
              </el-menu-item>
            </router-link>

            <el-menu-item index="order" v-if="isflag" @click="selectMenuItem('order')">
              <el-icon><Tickets /></el-icon>
              <span>Order Management</span>
            </el-menu-item>

            <el-menu-item index="manage" v-if="userInfo.rolename=='op' ? false : true" @click="selectMenuItem('manage')">
              <el-icon><Reading /></el-icon>
              <span>Task Management</span>
            </el-menu-item>

            <el-menu-item index="task" v-if="isflag" @click="selectMenuItem('task')">
              <el-icon><Calendar /></el-icon>
              <span>Schedule</span>
            </el-menu-item>
          </el-menu>
  data() {
    return {
      active: "/user",
    };
  },
mounted(){
    this.active =  window.sessionStorage.getItem("activerouter");
  },
  methods: {
    selectMenuItem(path) {
      this.active = path
      window.sessionStorage.setItem("activerouter", path);
    },
   } 

到了这里,关于Vue Element ui导航栏选中高亮,刷新后选中消失的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue + element ui 实现侧边栏导航栏折叠收起

    首页布局如下 要求点击按钮,将侧边栏收缩, 通过 row 和 col 组件,并通过 col 组件的 span 属性我们就可以自由地组合布局。 侧边栏代码  效果 补充路由:    

    2024年02月11日
    浏览(42)
  • vue2+element-ui实现侧边导航栏

    编写 client/src/components/LeftMenu.vue ,创建侧边导航栏: 编辑 client/src/views/Index.vue ,引入侧边导航栏:

    2024年02月02日
    浏览(48)
  • 用vue实现点击选中高亮效果

    1、代码 2、效果

    2024年02月16日
    浏览(28)
  • Vue结合element-ui实现导航菜单展开收缩小功能

    1. 先上个效果图    这里我把控制菜单收缩的放在中间了,是可以随便调整的。  2. 问题思路想法  ① 首先是布局,这就是个很经典的后台管理系统的容器页面,这里分为上下结构,上面一般放些系统logo、 登录的用户信息,还有一些小功能等等。然后下面又分为左右结构,

    2024年02月16日
    浏览(59)
  • 【Vue Element-ui el-table组件 实现跨分页全选 可全选中当前页 也可选中全量数据】

    前端模拟数据示例,无需后台接口,复制粘贴即可看到效果。 element-ui table里的全选功能只会全选当前页的所有数据 当table有分页功能的时候实现跨页全选 ①为table添加select方法(当用户手动勾选数据行的 Checkbox 时触发的事件) 两个参数 selection,row 选中的数据 最后一个选中

    2024年02月02日
    浏览(53)
  • vue+iView 动态侧边栏菜单保持高亮选中

    iview 组件在使用过程中,多多少少有一些小坑,本文简单罗列一二: 避坑指南: 关于iview 侧边栏菜单未能展开高亮选中回显问题 应用场景:iview-admin下接入动态菜单后,刷新或链接跳入时回显失效 简单就是两个方面:动态菜单接入前和动态菜单接入后菜单保持高亮选中问题

    2024年02月07日
    浏览(37)
  • 【Vue.js】使用Element中的Mock.js搭建首页导航&左侧菜单---【超高级教学】

          Mock.js是一个用于前端开发中生成随机数据、模拟接口响应的 JavaScript 库。模拟数据的生成器,用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率 总结来说,Element中的Mock.js是一个用于前端开发中生成随机数据、模拟接口响应的库。它可以帮助

    2024年02月07日
    浏览(42)
  • vue后台项目左侧菜单栏配合element-ui中tag标签实现多标签页导航栏

    效果图 第一步:设置左侧菜单栏 左侧菜单栏,左侧菜单我这边自定义写死的数据。 分为有子菜单和没子菜单等情况,我用到的只有俩种,没有三级菜单。 HTML部分

    2024年02月11日
    浏览(49)
  • Vue+JS+Element UI实战(电商项目1)

    目录 1.电商业务概述 2.电商后台管理系统的功能 ​3.项目初始化步骤 4.后台项目的环境安装配置 4.1. API V1 接口说明 4.2. 支持的请求方法 4.3. 通用返回状态说明 5.测试后台接口是否正常 6.登录/退出功能 1.登录概述 1.登录业务流程 2.登录业务的相关技术点 3.token原理  2.登录功能

    2024年02月05日
    浏览(42)
  • 使用 Element UI 和 Vue.js 搭建电商商城系统

    作者:禅与计算机程序设计艺术 电商商城系统作为传统互联网行业的标杆,在近几年已经成为各大公司必不可少的业务系统之一。但是,构建一个成熟的电商商城系统仍然具有诸多挑战。例如,功能模块繁多、用户交互复杂、界面呈现效果丰富、数据量大等。为了解决这些问

    2024年02月08日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包