基本信息
文件名称:vue项目刷新当前页面的三种方式(重载当前页面数据).docx
文件大小:16.56 KB
总页数:5 页
更新时间:2025-05-21
总字数:约2.13千字
文档摘要

vue项目刷新当前页面的三种方式(重载当前页面数据)

目录vue项目刷新当前页面的三种方式(重载当前页面数据)一、this.$router.go(0)二、location.reload()三、用provide/inject组合PS:vue项目刷新当前页面的三种方法

vue项目刷新当前页面的三种方式(重载当前页面数据)

一、this.$router.go(0)

相当于F5刷新,这种方法虽然代码很少,只有一行,但是体验很差。页面会一瞬间的白屏,体验不是很好

二、location.reload()

这种也是一样,画面一闪,体验不是很好,相当于页面刷新

推荐解决方法:

三、用provide/inject组合

原理:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效

在App.vue,声明reload方法,控制router-view的显示或隐藏,从而控制页面的再次加载。

template

divid=app

router-viewv-if=isRouterAlive/router-view

/div

/template

script

exportdefault{

name:App,

provide(){

return{

reload:this.reload

data(){

return{

isRouterAlive:true

methods:{

reload(){

this.isRouterAlive=false

this.$nextTick(function(){

this.isRouterAlive=true

/script

在需要用到刷新的页面。在页面注入App.vue组件提供(provide)的reload依赖,在逻辑完成之后(删除或添加),直接this.reload()调用,即可刷新当前页面。

注入reload方法

exportdefault{

inject:[reload],

}

在需要重载的地方直接调用

this.reload()

PS:vue项目刷新当前页面的三种方法

1、最直接整个页面重新刷新。

location.reload();

this.$router.go(0);

//这两种都可以刷新当前页面的,缺点就是相当于按ctrl+F5强制刷新那种,整个页面重新加载,会出现一个瞬间的空白页面,体验不好。

2、新建一个空白页面,点击确定的时候先跳转到这个空白页,然后再立马跳转回来。这个方式,相比第一种不会出现一瞬间的空白页,只是地址栏有个快速的切换的过程,也可采用。

3、provide/inject刷新相对比较理想。

//首先在app.vue进行修改

template

divid=app

//控制router-view的显示或隐藏,从而控制页面的再次加载

router-viewv-if=isRouterAlive/

/div

/template

script

exportdefault{

name:App,

provide(){

return{

reload:this.reload,

data(){

return{

isRouterAlive:true,

created(){},

methods:{

//通过声明reload方法,控制router-view的显示或隐藏,从而控制页面的再次加载

reload(){

this.isRouterAlive=false;

this.$nextTick(()={

this.isRouterAlive=true;

/script

在需要刷新的页面引入后直接调用即可

template

div

el-buttonicon=el-icon-refresh@click=refresh点击刷新/el-button

/div

/template

script

exportdefault{

//引用vuereload方法

inject:[reload],

name:,

data(){

return{