整理工作中用到的页面刷新方式:
1.provide/inject
2.router.go(0)
3.provide,inject
一、使用provide和inject
控制<router-view>
的显示隐藏
默认<router-view v-if="isRouterAlive" />
isRouterAlive是true,在需要刷新的时候把这个值设为false,接着再重新设为true。搭配provide和inject使用,不会使页面出现短暂的空白,体验效果比较好
App.vue
需要刷新的组件:
// 导入inject
import { inject } from 'vue';
// 注入刷新事件,这里括号中的参数要对应上前面provide中的第一个参数
const goRefresh = inject('reload');// 在需要执行的地方调用方法
goRefresh();
二、router.go(0)
利用了history中前进、后退的功能,传入0来刷新当前页面。相当于F5键刷新
刷新时页面会有一段时间的白屏。
const router = useRouter();
router.go(0);
三、location.reload()
效果同router.go(0)
location.reload();
1.JavaScript 中的一个方法,用于重新加载当前页面。这个方法可以在页面加载完成后使用,它将重新请求服务器并重新加载页面。
2.可传入布尔型参数,默认为false:
true :强制浏览器从服务器获取当前页面资源
false:从缓存中读取当前页面
3.对比location.replace()
replace() :通过指定url替换当前缓存历史,试用replace()后不能再"前进、后退"来访问已被替换的url