Element UI导航菜单之秘:无痕迹浏览与历史记录栈的管理

前言

        需求

        在使用 Element UI 的 el-menu 导航栏菜单时,发现 history 栈(历史记录栈)会不断缓存之前的记录,而在某些场景下我们可能不希望 history 栈(历史记录栈)中有之前的记录,即实现无痕迹流量模式。

        示例

        以下实例为默认行为对应情形: 

        代码

    <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect" router><el-menu-item index="/about">about</el-menu-item><el-menu-item index="/mode">mode</el-menu-item><el-menu-item index="/pagination">pagination</el-menu-item></el-menu>

        el-menu:

  • :default-active="activeIndex":这里使用 Vue 的绑定语法(:)来设置 el-menu 的默认激活项。activeIndex 是一个 Vue data 属性,它的值是当前激活菜单项的索引。
  • mode="horizontal":这表示菜单是水平模式,即菜单项是水平排列的。
  • @select="handleSelect":这是 Vue 的事件监听语法,表示当用户选择一个菜单项时,会调用 handleSelect 方法。
  • router:这个属性表示 el-menu 会使用 Vue Router 来导航。

        el-menu-item:

  • index="/about":每个 el-menu-item 都有一个 index 属性,它表示当用户选择这个菜单项时,他们将被导航到哪个路由。在这个例子中,如果用户选择 "about",他们将被导航到 /about 路由。

data() {return {activeIndex: window.sessionStorage.getItem('MenuPath') || '/about',};},methods: {handleSelect(key, keyPath) {window.sessionStorage.setItem('MenuPath', key);},},

        data:

  • return { activeIndex: window.sessionStorage.getItem('MenuPath') || '/about', }:这里定义了一个 Vue data 对象,它有一个 activeIndex 属性。这个属性的值从浏览器的 sessionStorage 中获取,键为 'MenuPath'。如果 session storage 中没有这个键,那么 activeIndex 的默认值是 '/about'。

        methods:

  • handleSelect(key, keyPath):这是一个 Vue 方法,它被调用当用户选择一个菜单项时。这个方法将选择的菜单项的键(key)存储到浏览器的 sessionStorage 中,键为 'MenuPath'。这样,即使在重新加载页面或刷新页面后,用户也能记住他们之前选择的菜单项。

 

实现

        原理

        使用router.push方法导航到不同的 URL 时会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,会回到之前的 URL。

        使用router.replace方法导航到不同的 URL 时会在 history 栈替换历史记录,即history 栈中一直都只有当前页面所对应的记录。

        代码

    <el-menu:default-active="activeIndex" mode="horizontal" @select="handleSelect"><el-menu-item index="/about">about</el-menu-item><el-menu-item index="/mode">mode</el-menu-item><el-menu-item index="/pagination">pagination</el-menu-item></el-menu>

        区别在 router 属性的配置上,因为 router 可以决定是否使用 vue-router 的模式,启用该模式会在激活导航时以 index 作为 path 进行路由跳转。换句话说,不启用 router 的话,点击导航时路由就不会跳转,那么我们就需要自己完成跳转相关代码,此时就可以使用 replace 代替默认的 push 来完成跳转,实现无痕迹浏览的目的。

data() {return {activeIndex: window.sessionStorage.getItem('MenuPath') || '/about',};},methods: {handleSelect(key, keyPath) {window.sessionStorage.setItem('MenuPath', key);this.$router.replace(key); // 使用 replace 跳转路由},},

效果


 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/293966.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Unity布料系统Cloth

Unity布料系统Cloth 介绍布料系统Cloth(Unity组件)组件上的一些属性布料系统的使用布料约束Select面板Paint面板Gradient Tool面板 布料碰撞布料碰撞碰撞适用 介绍 布料系统我第一次用是做人物的裙摆自然飘动&#xff0c;当时我用的是UnityChan这个unity官方自带的插件做的裙摆…

beaglebone black狗板,交叉编译Qt5(eglfs)

1. 下载buildroot-2023.023.7版本 make beaglebone_qt5_defconfig 然后编译&#xff0c;出现错误大多数是因为下载不了包&#xff0c;用bing搜索找到放到对应的dl目录下&#xff0c;最终完成编译。 备注&#xff1a;用系统默认配置&#xff0c;不要参考网上的&#xff0c;网…

Redis设计与实现之AOF

一、AOF Redis 分别提供了 RDB 和 AOF 两种持久化机制: RDB 将数据库的快照(snapshot)以二进制的方式保存到磁盘中。 AOF 则以协议文本的方式&#xff0c;将所有对数据库进行过写入的命令(及其参数)记录到 AOF 文件&#xff0c;以此达到记录数据库状态的目的。 本章首先介绍…

Rust报错:the msvc targets depend on the msvc linker but `link.exe` was not found

当我在我的 windows 电脑上安装 rust&#xff0c;然后用 cargo 新建了一个项目后&#xff0c;cargo run 会报错&#xff1a; error: linker link.exe not found| note: program not foundnote: the msvc targets depend on the msvc linker but link.exe was not foundnote: p…

竞赛保研 基于LSTM的天气预测 - 时间序列预测

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 机器学习大数据分析项目 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&#xff01; &#x1f9ff; 更多资料, 项目分享&#xff1a; https://gitee.com/dancheng-senior/po…

Redis可视化工具Redis Desktop Manager mac功能特色

Redis Desktop Manager mac是一款非常实用的Redis可视化工具。RDM支持SSL / TLS加密&#xff0c;SSH隧道&#xff0c;基于SSH隧道的TLS&#xff0c;为您提供了一个易于使用的GUI&#xff0c;可以访问您的Redis数据库并执行一些基本操作&#xff1a;将键视为树&#xff0c;CRUD键…

Kafka 如何保证高可用?

Kafka 的基本架构组成是&#xff1a;由多个 broker 组成一个集群&#xff0c;每个 broker 是一个节点&#xff1b;当创建一个 topic 时&#xff0c;这个 topic 会被划分为多个 partition&#xff0c;每个 partition 可以存在于不同的 broker 上&#xff0c;每个 partition 只存…

【论文解读】CNN-Based Fast HEVC Quantization Parameter Mode Decision

时间&#xff1a;2019 年 级别&#xff1a;SCI 机构&#xff1a;南京信息工程大学 摘要 随着多媒体呈现技术、图像采集技术和互联网行业的发展&#xff0c;远程通信的方式已经从以前的书信、音频转变为现在的音频/视频。和 视频在工作、学习和娱乐中的比例不断提高&#xff0…

SpringBoot找不到或无法加载主类

1&#xff0c;bug贴图 2&#xff0c;问题说明 之所以导致这个问题是因为新建项目的时候&#xff0c;项目目录是这样的com.lab.hei.springboot.dubbo.ProviderApplication 我觉得这个目录太长了&#xff0c;所以修改了目录&#xff0c;修改后cn.alisa.springboot.dubbo.Provider…

RIPV1配置实验

查看路由器路由表&#xff1a; 删除手工配置的静态路由项&#xff1a; Route1->Config->static Remove删除路由项 删除Route3的路由项&#xff0c;方法同上删除Route2的路由项&#xff0c;方法同上 完成路由器RIP配置&#xff1a; Route1->Config->RIP->Ne…

The Cherno C++笔记 03

目录 Part 07 How the C Linker Works 1.链接 2.编译链接过程中出现的错误 2.1 缺少入口函数 注意:如何区分编译错误还是链接错误 注意&#xff1a;入口点可以自己设置 2.2 找不到自定义函数 2.2.1缺少声明 2.2.2自定义函数与引用函数不一致 2.3 在头文件中放入定义 …

nodejs微信小程序+python+PHP在线学习与推荐系统设计与实现-计算机毕业设计推荐

目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 3 2.1 nodejs简介 4 2.2 express框架介绍 6 2.4 MySQL数据库 4 第3章 系统分析 5 3.1 需求分析 5 3.2 系统可行性分析 5 3.2.1技术可行性&#xff1a;…