开发者社区> auqbllxiu> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Vue中刷新当前页面

简介: Vue中刷新当前页面
+关注继续查看

刷新页面

方法一

window.reload();

方法二

this.$router.go(0);

以上两种方式会出现白屏

方法三

不会有闪烁的空白出现

App.vue

<template>

<div id="app">
<!-- 增加判断,让其隐藏 -->
<router-view v-if="isRouterAlive"/>
</div>
</template>

<script>
export default {
name: 'App',

// 暴露reload,方便后面组件调用
provide(){
return {
reload: this.reload
}
},

data(){
return {
isRouterAlive: true
}
},

methods:{
// 重新加载方法
reload(){
this.isRouterAlive = false;
this.$nextTick(()=>{
this.isRouterAlive = true;
})
}
}
}
</script>

子组件调用刷新方法

<script>
export default {

// 获取APP.vue里的reload方法
inject: ["reload"],

methods: {
reloadPage() {
// 刷新页面
this.reload();
}
}
}
</script>

参考

vue项目如何刷新当前页面

            </div>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Vue如何刷新当前页面?我是这样做的,你呢?
Vue如何刷新当前页面?我是这样做的,你呢?
4 0
Vue中刷新当前页面
Vue中刷新当前页面
6 0
vue 利用hash值实现刷新无跳转页面
vue 利用hash值实现刷新无跳转页面
6 0
Vue中 获取当前时间并实时刷新
Vue中 获取当前时间并实时刷新
9 0
Vue中刷新当前页面
Vue中刷新当前页面
7 0
Vue中刷新当前页面
Vue中刷新当前页面
16 0
前端工作小结24-vue实现当前页面刷新
前端工作小结24-vue实现当前页面刷新
7 0
设计模式 - 建造者模式 Lombok @Builder 实操
设计模式 - 建造者模式 Lombok @Builder 实操
121 0
【Ajax入门】实现页面的局部刷新,前后端交互少不了的技术
之前已经学习jQuery了,我们今天在jQuery的基础上继续学习Ajax。如果你不知道jQuery那么你可以先去看看本专栏的上一篇文章。
140 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
基于VUE的单页面性能优化实践
立即下载
利用编译将 Vue 组件转成 React 组件
立即下载
产品经理的硬技能——业务建模
立即下载