Vue刷新当前页面（成功）

2024-05-08 19:02:06

查了资料一共有三种办法，只试过两种，都成功了，介绍一下。

一、直接路由刷新

vue自带了刷新的办法

this.$router.go(0);

但是这个办法会让整个当前页面刷新，相当于F5。如果项目中只是做一个编辑修改操作，希望修改后数据立马改变，但是使用此方法会出现一个短暂的空白页（如下图），用户效果特别不好，不推荐。

二、使用provice和inject结合的方法

这种方法会局部刷新，不会出现整个页面刷新的效果，非常适合项目中更新操作后的刷新页面。
1.首先找到vue项目中的App.vue，这是根组件，相当于所有*.vue的父组件了，所以在这里去定义reload可以全局使用。

2.在App.vue中添加刷新代码

<template><div id="app"><router-view v-if="isRouterAlive"></router-view></div>
</template>
<script>
export default {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，大家的可能不一样，不过不影响。

3.然后在需要刷新的子组件页面中添加inject。

export default {inject:['reload'],data () {return {...}},

4.最后在刷新页面中需要刷新的地方添加this.reload()方法

this.reload();

还有一种刷新方法是先进入一个空路由，然后在立马返回，这种方法没什么必要，百度上也有方法详解，所以这里不介绍了，个人认为还是使用provice和inject结合最适合。
希望可以帮助到大家！

一开始嫌麻烦用的是第一种，但是放到项目中的时候实在是影响，体验效果极差，于是果断换了方法！果然还是第二种好用。所以以后不要嫌麻烦……多试试新方法！

Vue刷新当前页面（成功）相关推荐

最实用的vue刷新当前页面，provide / inject 组合方式实现vue页面刷新
这是一种最实用的vue刷新当前页面,其他方式一般会出现一个瞬间的空白页面,体验不好,相当于按ctrl+F5 强制刷新那种方式:provide / inject 组合方式实现vue页面刷新 1.修改 ...
Vue刷新当前页面几种方式
问题: 最近些日子项目中突然碰到了一个需求,再完成编辑操作之后需要进行页面刷新,通过实验有如下几种姿势可以解决需求中的问题,下面进行简单总结如下. 姿势一:this.$router.go(0) 这个姿 ...
vue 刷新当前页面、组件；provide、inject
provide.inject 最外层组件(祖先组件)向其所有子组件注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效:通过在App.vue,声明reload方法,控制router- ...
vue 刷新当前页面
1.首先在app.vue页面加入以下代码: 2.在需要刷新的页面 .
vue刷新当前页面，不留白
用provide / inject 组合原理:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效在App.vue,声明reload方法,控制ro ...
vue刷新当前页面--provide / inject 用法
window.reload()/router.go(0): 采用window.reload(),或者router.go(0)刷新时,整个浏览器重新加载,闪烁.严重影响体验 provide / inje ...
Vue刷新组件,页面刷新
通过:provide / inject 方式实现! Home.vue <keep-alive :include="tagsList" v-if="showView& ...
解决：vue项目的页面刷新之 title被重置问题
如何解决:vue项目的页面刷新之 title被重置问题? 需求场景描述:(以title名为"个人中心"页面为例) 用户初次访问进入"个人中心"页,浏览器显示的页 ...
vue切换菜单时不需要页面刷新_antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作...
废话不说,上代码! nav 1 nav 2 nav 3 重点: 1,selectedkeys要设置成$route.path地址 2,a-menu-item 的key设置成要去的地址刷新页面,成功! ...

最新文章

热门文章