Vue3刷新页面的方法

我们在删除完列表项后,通常需要刷新列表页,我们可以使用JS原生的方法刷新页面。

location.reload();

但是这会让整个屏幕重新加载,体验很不好。更好的方式如下:

Vue3解决方法:

App.vue:

复制代码
<script setup>
import { nextTick, provide, ref } from "vue";
const isRouter = ref(true);
const reload = () => {
  isRouter.value = false;
  nextTick(() => {
    isRouter.value = true;
  });
};
provide("reload", reload);
</script>

<template>
  <router-view v-if="isRouter"/>
</template>
复制代码

要使用的页面:

import { inject } from "vue";
const reload = inject("reload");

然后调用

reload();

即可刷新页面。

 

posted @   罗毅豪  阅读(3642)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示