刷新当前页面

一, reload 直接刷新页面

window.location.reload();
$router.go(0);

相当于按了 F5, 因此缺点也很明显, 体验感不佳, 因为要加载所有页面资源相对较慢, 比较耗时.

二, Vue Router 刷新当前页面

这个时候, 我们通过 $router.push 一个 refresh 路由的形式实现, 具体步骤如下:

  1. 创建一个vue文件
<template>
<div></div>
</template>
<script setup>
beforeRouteEnter(to, from, next) {next(vm => {vm.$router.replace(from.fullPath);});
}
</script>
  1. 在你的路由文件中, 配置上述文件路由, 示例代码:
    routes 数组中直接添加就行]
{path: '/refresh',name: 'refresh',component: () => import('步骤一中创建文件的路径')
},
  1. 在目标位置, 使用 $router.push 上述路由即可, 示例代码:
$router.push({name: 'refresh'});

三, 依赖注入方式实现 (即, provide/inject )

中心思想: 通过 v-if 来切换 router-view 的 显示/隐藏 从而实现重新加载组件的目的. 步骤如下.

  1. 修改 路由出口文件 ( 我测试时是在 App.vue 文件中加的 ), 通过 provide 提供一个刷新方法给后代组件.

注意: 我的Demo中没有测试路由嵌套的场景, 如果你是路由嵌套, 只想刷新嵌套的子路由, 那在这一步修改的就应该是 子路由 出口文件.

核心代码:

<template><div id="app"><!-- <router-view></router-view> --><router-view v-if="isRefreshFlag"></router-view></div>
</template>
<script setup>
import { ref, nextTick, provide } from "vue";const isRefreshFlag = ref(true)
function reloadPage() {isRefreshFlag.value = false;nextTick(() => {isRefreshFlag.value = true})
}
provide("reloadPage", reloadPage)</script>

后台管理平台Geeker项目刷新(只刷新嵌套的子路由)
Main.vue

// 注入刷新页面方法
<template><router-view v-slot="{ Component, route }"><component :is="createComponentWrapper(Component, route)" v-if="isRouterShow" :key="route.fullPath" /></<router-view>   
</template>
<script setup lang="ts">const isRouterShow = ref(true);const refreshCurrentPage = (val: boolean) => (isRouterShow.value = val);provide("refresh", refreshCurrentPage);
</script>

tab.vue
refresh按钮

<script setup lang="ts">
// refresh current page
const refreshCurrentPage: Function = inject("refresh") as Function;
const refresh = () => {setTimeout(() => {route.meta.isKeepAlive && keepAliveStore.removeKeepAliveName(route.fullPath as string);refreshCurrentPage(false);nextTick(() => {route.meta.isKeepAlive && keepAliveStore.addKeepAliveName(route.fullPath as string);refreshCurrentPage(true);});}, 0);
};
</script>

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

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

相关文章

Leetcode49. 字母异位词分组(java实现)

今天我来给大家分享的是leetcode49的解题思路&#xff0c;题目描述如下 如果没有做过leetcode242题目的同学&#xff0c;可以先把它做了&#xff0c;会更好理解异位词的概念。 本道题的大题思路是&#xff1a; 首先遍历strs&#xff0c;然后统计每一个数组元素出现的次数&#…

电商数据精细化运营解决方案(18页PPT)

方案介绍&#xff1a; 电商数据精细化运营解决方案通过全面、深入的数据分析与应用&#xff0c;助力电商企业实现精细化管理和精准化营销&#xff0c;从而在激烈的市场竞争中脱颖而出。 部分方案内容&#xff1a;

Prometheus 监控Tomcat等java应用的状态

5月应用服务出现问题&#xff0c;当别的小伙伴问我&#xff0c;有没有Tomcat等应用状态的监控的时候&#xff0c;我有点儿尴尬。所以赶紧抽空部署一下。 在配置之前&#xff0c;就当已经会安装jdk和tomcat了。 一、下载jmx_exporter #linux下 cd /usr/local/prometheus wget …

Docker入门指南:Linux系统下的完整安装步骤与常见问题解答

本文以centos7演示。 Docker安装 可参考官方安装文档&#xff1a;Install Docker Engine on CentOS | Docker Docs 一图流&#xff1a; # 移除旧版本docker sudo yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest \docker-latest-logro…

将一个url文件链接下载到本地的方法,以及从url中提取并创建一个文件保存路径,以及m3u8文件的解析及下载

最近工作中&#xff0c;遇到了讲一个m3u8的文件下载到本地&#xff0c;使用代码如下&#xff1a; import urllib.requestm3u8file os.path.join(folderPath, dirName .m3u8) urllib.request.urlretrieve(m3u8url, m3u8file) 不过上述代码有个小问题&#xff0c;就是需要使用…

Debug-018-elementUI-el-tree中通过CSS隐藏任意一项的选择框checkbox

前情提要&#xff1a; 我们项目中使用的是elementUI&#xff0c;业务中经常需要使用到el-tree组件去实现一些有层级关系的功能。现在有一个需求描述一下&#xff1a;首先是这个el-tree是个有checkbox的树&#xff0c;每一子节点都可以被选择&#xff0c;用于去实现一些系统的权…

PHP多场地预定小程序系统源码

一键畅游多地&#xff01;多场地预定小程序的超实用指南 段落一&#xff1a;【开篇&#xff1a;告别繁琐&#xff0c;预订新体验】 &#x1f389;&#x1f680; 还在为多个活动或会议的场地预订而头疼不已吗&#xff1f;多场地预定小程序来拯救你啦&#xff01;它像是一位贴心…

【QT】QT 窗口(菜单栏、工具栏、状态栏、浮动窗口、对话框)

Qt 窗口是通过 QMainWindow类来实现的。 QMainWindow 是一个为用户提供主窗口程序的类&#xff0c;继承自 QWidget 类&#xff0c;并且提供了⼀个预定义的布局。QMainWindow 包含一个菜单栏&#xff08;Menu Bar&#xff09;、多个工具栏&#xff08;Tool Bars&#xff09;、…

7.26总结

1.我发现我的界面非常不符合要求&#xff0c;魔改了一下界面 2.在此基础上实现了编辑资料的功能&#xff0c;之前的编辑资料不够用完善&#xff0c;现在将所有数据存入数据库&#xff0c; 然后将更改的图片路径存到了服务端的文件夹&#xff0c;文件名为id更方便获取图片&…

Cuda编程模型中常见的错误检测方法

Cuda编程模型中常见的错误检测方法 1 CUDA错误检测简介2 直接嵌入检测函数2.1 检测函数介绍2.2 使用示例 3 封装在.cuh头文件中嵌入3.1 创建 error.cuh 头文件3.2 在 CUDA 程序中包含 error.cuh 并调用 CHECK 宏3.3 使用示例 1 CUDA错误检测简介 CUDA编程模型中的错误检测是确…

C++ - char*、const char*、char[]、string

const char* const char* 用来定义字符串常量。 char[ ] char型的字符数组是一种定长的数组&#xff0c;存储指定长度的字符序列&#xff0c;数组中的每个元素都是一个char类型的变量&#xff0c;如&#xff1a; char arr[] {h, a, l, l, o, \0}; char c arr[0]; // 访问…

【二叉树 C++DFS】2458. 移除子树后的二叉树高度

本文涉及知识点 二叉树 CDFS LeetCode 2458. 移除子树后的二叉树高度 给你一棵 二叉树 的根节点 root &#xff0c;树中有 n 个节点。每个节点都可以被分配一个从 1 到 n 且互不相同的值。另给你一个长度为 m 的数组 queries 。 你必须在树上执行 m 个 独立 的查询&#xff…

模式Hash和history

vuerouter有两种路由模式Hash和history。区别&#xff1a;Hash为默认模式&#xff0c;url中包含一个#符号的哈希部分。优势&#xff1a;兼容性好&#xff0c;不需要后端服务器的特殊配置。缺点&#xff1a;不够美观&#xff0c;搜索引擎优化较差。History模式使用的浏览器的His…

C# 写入SQLServer数据库报错SqlException: 不能将值 NULL 插入列 ‘ID‘

private int id; [Key] [DatabaseGenerated(DatabaseGeneratedOption.Identity)]//id自增 public int ID { get > id; set > id value; } 将ID属性下的标识规范由否改成是

STM32-寄存器时钟配置指南

目录 启动 SystemInit SetSysClock 总结 启动 从startup_stm32f0xx.s内的开头的Description可以看到 ;* Description : STM32F051 devices vector table for EWARM toolchain. ;* This module performs: ;* - Set the in…

微信小程序支付流程

前端需要做的事情&#xff1a; 生成平台订单&#xff1a;前端调用接口&#xff0c;向后端传递购买的商品信息、收货人信息&#xff0c;&#xff08;后端生成平台订单&#xff0c;返回订单编号&#xff09;获取预付单信息&#xff1a;将订单编号发送给后端后&#xff0c;&#x…

Hadoop单机版环境搭建

一 . 案例信息 Hadoop 的安装部署的模式一共有三种&#xff1a; 本地模式&#xff0c;默认的模式&#xff0c;无需运行任何守护进程&#xff08; daemon &#xff09;&#xff0c;所有程序都在单个 JVM 上执行。由 于在本机模式下测试和调试 MapReduce 程序较为方便&#x…

leetocde662. 二叉树最大宽度,面试必刷题,思路清晰,分点解析,附代码详解带你完全弄懂

leetocde662. 二叉树最大宽度 做此题之前可以先做一下二叉树的层序遍历。具体题目如下&#xff1a; leetcode102二叉树的层序遍历 我也写过题解&#xff0c;可以先看看学习一下&#xff0c;如果会做层序遍历了&#xff0c;那么这题相对来说会简单很多。 具体题目 给你一棵…

第11章 Express即时通讯简单集成

在现代 Web 应用中&#xff0c;实时通信变得越来越重要&#xff0c;特别是对于需要实时数据更新的应用&#xff0c;比如聊天应用、实时通知、在线游戏等。Express 是一个灵活且强大的 Web 框架&#xff0c;通过结合 WebSocket 和 Socket.IO&#xff0c;可以轻松实现实时通信功能…

[OJ]水位线问题,1.采用回溯法(深度优先遍历求解)2.采用广度优先遍历求解

1.深度优先遍历 使用回溯法,深度优先遍历利用栈先进后出的特点,在加水控制水量失败时, 回到最近一次可对水进行加水与否的位置1.对于给定水量k,是否在[l,r]之间&#xff0c; 是:是否加水(加水y,用掉x,是否在[l,r]之间)(不加水y,用掉x,是否在[l,r]之间)先尝试加水&#xff0c;如…