Vue 项目重复点击菜单刷新当前页面

需求:“在当前页面点击当前页面对应的菜单时,也能刷新页面。”

由于 Vue 项目的路由机制是路由不变的情况下,对应的组件是不重新渲染的。所以重复点击菜单不会改变路由,然后页面就无法刷新了。

方案一

在vue项目中,如何实现再次点击,刷新右侧内容,我使用了vue中的[provide/inject]

1. 在父组件中设置provide

 2.还有别忘了methods中reload()这个方法

 3.在左侧菜单组件中通过inject调用

 

参考文档vue+element的后台项目 实现再次点击左侧菜单栏,刷新右侧内容_element右侧组件刷新-CSDN博客

方案二

借助重定向

点击左侧子菜单时,菜单栏会折叠再刷新一下


利用一个空的 redirect 页面,通过判断当前路由是否与点击的路由一致,如果一致,则跳转到 redirect 页面,然后在 redirect 页面重定向回跳转之前的页面。这样就实现了页面刷新了。

  1. 创建一个空的页面:src/layout/components/redirect.vue

    <script>
    export default {
      beforeCreate() {
        const { query } = this.$route
        const path = query.path
        this.$router.replace({ path: path })
      },
      mounted() {},
      render: function(h) {
        return h() // avoid warning message
      }
    }
    </script>

  2. 挂载路由:src/router/index.js

    {
      path: '/redirect',
      component: () => import('@/layout/components/redirect.vue')
    },
  3. 菜单跳转的地方添加事件,进行相关处理:

<el-menu ... @select="selectMenuItem">
    // ...
</el-menu>

<script>
export default {
  methods: {
    selectMenuItem (url, indexPath) {
      if (this.$route.fullPath === url) {
        // 点击的是当前路由 手动重定向页面到 '/redirect' 页面
        this.$router.replace({
          path: '/redirect',
          query: {
            path: encodeURI(url)
          }
        })
      } else {
        // 正常跳转
        this.$router.push({
          path: url
        })
      }
    }
  }
}
</script>

用此种方法,当点击同一菜单时,地址栏每次的变化都是从:http://localhost:8080/#/redirect?path=xxxxxx 至 http://localhost:8080/#/xxxxxx

 参考文档:Vue 项目重复点击菜单刷新当前页面 - 掘金 (juejin.cn)

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

探索Python编程世界:从入门到精通

一.Python 从入门到精通 随着计算机科学的发展&#xff0c;编程已经成为了一种必备的技能。而 Python 作为一种简单易学、功能强大的编程语言&#xff0c;越来越受到人们的喜爱。本文将为初学者介绍 Python 编程的基础知识&#xff0c;帮助他们踏入 Python 编程的大门&#xf…

网络安全: Kali Linux 使用 MSF 渗透测试

目录 一、实验 1.环境 2.登录MSF&#xff08;Metasploit Framework&#xff09;控制台 3.MSF初始化 4.MSF 管理工作区 5.Kali Linux (2024.1) 对Windows server 进行网址目录扫描 6.Kali Linux (2022.4) 对Ubuntu进行网址目录扫描 7.Kali Linux (2024.1) 对Windows ser…

Java 的七种垃圾收集器

了解 Java 中的内存管理。 用 C 或 C 这样的编程语言写一个应用时&#xff0c;需要编写代码来销毁内存中不再需要的对象。当应用程序扩展得越来越复杂时&#xff0c;未使用对象被忽略释放的可能性就越大。这会导致内存泄露&#xff0c;最终内存耗尽&#xff0c;在某个时刻将没有…

Matlab/Simulink验证MAB建模规范

前言 为什么MAB&#xff1f; MathWorks Advisory Board&#xff08;MAB&#xff09;是由MathWorks公司设立的一个咨询委员会&#xff0c;旨在提供有关MathWorks产品和服务的反馈、建议和意见。MAB成员通常是来自学术界、工业界和其他领域的专业人士&#xff0c;他们在各自领域…

【Sql Server】C#通过拼接代码的方式组合添加sql语句,会出现那些情况,参数化的作用

欢迎来到《小5讲堂》&#xff0c;大家好&#xff0c;我是全栈小5。 这是《Sql Server》系列文章&#xff0c;每篇文章将以博主理解的角度展开讲解&#xff0c; 特别是针对知识点的概念进行叙说&#xff0c;大部分文章将会对这些概念进行实际例子验证&#xff0c;以此达到加深对…

【C++从0到王者】第四十七站:最小生成树

文章目录 一、最小生成树的概念1.概念2.最小生成树的构造方法 二、Kruskal算法1.算法思想2.代码实现 三、Prim算法1.算法思想2.代码实现3.试试所有节点为起始点 一、最小生成树的概念 1.概念 连通图&#xff1a;在无向图中&#xff0c;若从顶点v1到顶点v2有路径&#xff0c;则…

这本书太好了!150页就能让你上手大模型应用开发

如果问个问题&#xff1a;有哪些产品曾经创造了伟大的奇迹&#xff1f;ChatGPT 应该会当之无愧入选。 仅仅发布 5 天&#xff0c;ChatGPT 就吸引了 100 万用户——当然&#xff0c;数据不是关键&#xff0c;关键是其背后的技术开启了新的 AI 狂潮&#xff0c;成为技术变革的点火…

强势改进!基于改进多目标灰狼算法的冷热电联供型微电网运行优化程序代码!

适用平台&#xff1a;MatlabYalmipCplex 程序以综合能源系统/微电网为研究对象&#xff0c;将微电网的运行费用和环境污染成本作为优化目标&#xff0c;考虑冷热电负荷和设备运行要求的约束&#xff0c;建立的微电网的多目标优化模型&#xff0c;使用改进多目标灰狼算法算法进…

有个朋友被骗了,大家要擦亮眼睛

1.引言 大家好&#xff0c;我是Leo哥&#x1fae3;&#x1fae3;&#x1fae3;&#xff0c;昨天凌晨有个粉丝朋友找到Leo哥&#xff0c;咨询一些问题&#xff0c;现在的朋友们真卷呐&#xff0c;大半夜还在挑灯夜战。可无奈Leo哥12点之前已经睡了&#xff0c;身体为重&#xf…

智慧社区养老:Java与SpringBoot的技术融合

✍✍计算机毕业编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java、…

Day31|贪心算法1

贪心的本质是选择每一阶段的局部最优&#xff0c;从而达到全局最优。 无固定套路&#xff0c;举不出反例&#xff0c;就可以试试贪心。 一般解题步骤&#xff1a; 1.将问题分解成若干子问题 2.找出适合的贪心策略 3.求解每一个子问题的最优解 4.将局部最优解堆叠成全局最…

C语言第三十五弹---文件操作(上)

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】 文件操作 1、为什么使用文件&#xff1f; 2、什么是文件&#xff1f; 2.1、程序文件 2.2、数据文件 2.3、文件名 3、二进制文件和文本文件 4、文件的打开和…

YOLO v9训练自己数据集

原以为RT-DETR可以真的干翻YOLO家族&#xff0c;结果&#xff0c;&#xff01;&#xff01;&#xff01;&#xff01; 究竟能否让卷积神经网络重获新生&#xff1f; 1.数据准备 代码地址&#xff1a;https://github.com/WongKinYiu/yolov9 不能科学上网的评论区留言 数据集…

【Python】新手入门(2):避免将关键字作为标识符

Python新手入门&#xff08;2&#xff09;&#xff1a;避免将关键字作为标识符 &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程&#x1…

蓝桥杯-单片机组基础7-存储器映射扩展与PWM脉冲调制(附小蜜蜂课程代码)

蓝桥杯单片机组备赛指南请查看这篇文章&#xff1a;戳此跳转蓝桥杯备赛指南文章 本文章针对蓝桥杯-单片机组比赛开发板所写&#xff0c;代码可直接在比赛开发板上使用。 型号&#xff1a;国信天长4T开发板&#xff08;绿板&#xff09;&#xff0c;芯片&#xff1a;IAP15F2K6…

【Python】matplotlib绘制图像时增加颜色条

一、需求 plt.imshow()是matplotlib中的一个函数&#xff0c;用于显示图像。它可以传递一个二维或三维数组作为image参数&#xff0c; 并将图像数据显示为图形&#xff0c;并对图像进行不同的可视化设置。 在显示的过程中&#xff0c;我们如果需要增加一个图例显示颜色条&…

Word转Excel怎么操作?4个实用技巧别忘了!

“我在处理一个Word文件时&#xff0c;需要将里面的一些表格内容转化为Excel。有什么比较好用的Word转Excel方法可以推荐吗&#xff1f;” 在互联网时代&#xff0c;数据处理和信息整合是工作中不可或缺的一部分。有时&#xff0c;我们可能会遇到需要将Word文档中的数据或内容转…

高性能深度学习库luminal

一、概述 Luminal是一个深度学习库&#xff0c;它使用可组合的编译器来实现高性能。 当前的机器学习库往往很庞大复杂&#xff0c;因为它们试图直接将高级操作映射到底层手工编写的内核上&#xff0c;并且专注于立刻执行&#xff08;eager模式&#xff09;。像PyTorch这样的库…

Java Web开发---复试Tips复习

&#xff08;自用&#xff0c;摘录自各种文章和自己总结&#xff09; 小知识点理解 Web Web应用开发主要是基于浏览器的应用程序开发。一个Web应用由多部分组成 Web应用程序编写完后&#xff0c;若想提供给外界访问&#xff0c;需要服务器来统一管理 常用的动态网页语言——…

react native中如何使用webView调用腾讯地图选点组件

react native中如何使用webView调用腾讯地图选点组件 效果示例图代码示例备注 效果示例图 代码示例 import React, {useEffect, useRef, useState} from react; import {Modal, StyleSheet} from react-native; import {pxToPd} from ../../common/js/device; import {WebView…