vue3 实现刷新当前页面

用这种方法可以实现，但效果很差，白屏时间很长，自己试一下就知道了。

location.reload()

那么我们怎么做呢，别着急，马上看重点：

首先去我们的App.vue里面（以下只显示此功能相关代码）

import { provide, ref, nextTick } from 'vue'
const isRouteActive = ref(true);
provide('reload', ()=>{isRouteActive.value = false;nextTick(()=>{isRouteActive.value = true;})
})

<template><route-view v-slot="{component}" v-if="isRouteActive"><keep-alive><Component :is="component"></keep-alive></route-view>
</template>

然后去我们需要刷新的页面

import { inject } from 'vue'
consr reload = infect('inject);// 下面这行代码写在你需要reload的地方
reload();

这种效果很完美，试下就知道了~

另外：这两种，我试了都没有效果，不清楚为什么，有大佬知道的话，还望不吝赐教！

instance.proxy.$forceUpdate(); // 没用
router.go(0);  // 没用

vue3 刷新当前页面(provide,inject)相关推荐

vue刷新当前页面--provide / inject 用法
window.reload()/router.go(0): 采用window.reload(),或者router.go(0)刷新时,整个浏览器重新加载,闪烁.严重影响体验 provide / inje ...
VUE3组件 (4) 关于 Provide Inject 依赖注入
前言以下代码和内容的使用都是在setup中,未使用TS. <script setup> </script> VUE3组件 (1) 关于defineProps() VUE3组件 ...
Vue3+TS 中使用Provide/Inject 的例子
详见:Provide / Inject | Vue.js (vuejs.org) 作用:在深度嵌套的组件中,将 prop 沿着组件链逐级传递会很麻烦.使用 Provide/Inject可以直接将父组件 ...
vue 刷新当前页面、组件；provide、inject
provide.inject 最外层组件(祖先组件)向其所有子组件注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效:通过在App.vue,声明reload方法,控制router- ...
vue使用provide / inject 组合刷新页面+单独组件刷新
原文链接:https://www.cnblogs.com/leng12/p/xiaoleng.html 一.this.$router.go(0) 相当于F5刷新,这种方法虽然代码很少,只有一行,但是体 ...
【Vue】采用provide/inject方式刷新当前页面
1.场景在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求. 2.遇到的问题 1. 用vue-router重新路由到当前页面,页面是不进行刷新的 2.采用window.rel ...
最实用的vue刷新当前页面，provide / inject 组合方式实现vue页面刷新
这是一种最实用的vue刷新当前页面,其他方式一般会出现一个瞬间的空白页面,体验不好,相当于按ctrl+F5 强制刷新那种方式:provide / inject 组合方式实现vue页面刷新 1.修改 ...
vue3中的provide/inject(提供/注入)
vue3中的provide/inject(提供注入) 在说provide/inject先说一下prop逐级穿透问题. 通常我们从父组件向子组件传递数据时,会用到props.对于只需要传递一层或二层时还 ...
vue3中Provide/Inject的使用
vue3中使用Provide/Inject依赖注入,将替代vue2中在原型链上挂载一些属性 //APP.vue//在app.vue内注册import { provide ,ref ,readonly} ...

vue3 刷新当前页面(provide,inject)

vue3 实现刷新当前页面

vue3 刷新当前页面(provide,inject)相关推荐

最新文章

热门文章