import { ref, provide, nextTick } from "vue"; const isRouterView = ref(true); //父组件刷新方法 const reload = () => { isRouterView.value = false; nextTick(() => { isRouterView.value = true; }) } //provide进行注册 provide('reload', reload); 之后子子孙孙组件操作:...
第一种: location.reload()this.$router.go(0) 这两种都可以刷新当前页面的,缺点就是相当于按ctrl+F5 强制刷新那种,整个页面重新加载,会出现一个瞬间的空白页面,体验不好。 第二种:provide / inject 组合 方式是我试过最实用的,下面用项目截图给大家说明下: 首先,要修改下你的app.vue. 通过声明reload方法,...
3. 使用provide/inject组合方式 这种方法通过在App.vue中定义一个reload方法,并在需要刷新页面的组件中注入该方法来实现页面刷新。这种方法不会导致页面短暂变空白,用户体验较好。 优点: 不会导致页面短暂变空白,用户体验较好。 可以精确控制哪些组件需要刷新,避免全局刷新带来的性能问题。 缺点: 实现稍微复杂,涉及provid...
ArticleTable.vue子组件 import{ inject }from'vue'//注入刷新事件,这里括号中的参数要对应上前面provide中的第一个参数constreload: any =inject('reload')constconfirm=async(data: any) => {awaitarticle.DeleteAsync(data.articleId).then(() =>{reload() }) }...
注意:provide只能够向下进行传递数据;在使用provide和inject的时候需从vue中引入。 使用方法: 直接看代码即可: import {provide, ref, nextTick } from "vue"; const isRouterAlive = ref(true); const reload = () => { isRouterAlive.value = false; nextTick(() => { isRouterAlive.value = true ...
若页面有二级及以上路由,那么不仅需要在App.vue里做keepAlive配置,还需要子路由里做同样的keepAlive配置。 如在最外层layout里配置,如图 无卡顿刷新页面--reload配置 import{ ref, provide, nextTick }from"vue";exportdefault{name:"App",setup() {constisRouterAlive =ref(true);provide("reload",() =>{ i...
location.reload(); 1. 但是这会让整个屏幕重新加载,体验很不好。更好的方式如下: Vue3解决方法: App.vue: import { nextTick, provide, ref } from "vue"; const isRouter = ref(true); const reload = () => { isRouter.value = false; nextTick(() =...
},setup() {// 局部组件刷新constisRouterAlive =ref(true);constreload= () => { isRouterAlive.value=false;nextTick(() =>{ isRouterAlive.value=true; }); };provide("reload", reload);return{ isRouterAlive, }; },watch: { },
//注入刷新事件,这里括号中的参数要对应上前面provide中的第一个参数 const reload: any = inject('reload') const confirm = async (data: any) => { await article.DeleteAsync(data.articleId).then(() => { reload() }) } 1. 2. 3.
在页面注入App.vue组件提供(provide)的 reload 依赖,在逻辑完成之后(删除或添加...),直接this.reload()调用,即可刷新当前页面。 解释下: provide:选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。 inject:一个字符串数组,或一个对象,对象的 key 是本地的绑定名 ...