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>
目录
相关文章
|
6月前
|
JavaScript 前端开发
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
59 0
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
|
小程序
uni-app:刷新当前页面
执行这三行代码就可以实现uniapp刷新当前页面。
4319 0
|
4月前
|
JavaScript
Vue中给当前页面传递参数并重新加载,vue使用this.$router.push跳转页面,给跳转过去的页面传参不一致时重新加载
Vue中给当前页面传递参数并重新加载,vue使用this.$router.push跳转页面,给跳转过去的页面传参不一致时重新加载
191 0
|
6月前
|
JavaScript
Vue 路由切换时页面刷新页面重新渲染
在Vue中,路由切换并不自动重新渲染页面,这可能导致传递参数到子组件时出现问题。使用`this.$route.replace(&#39;地址&#39;)`或`this.$route.push({name:&#39;地址&#39;,params:{key:value}})`进行跳转,但子组件不会响应变化。为解决此问题,需监听`$route`对象的变化,如图所示,通过`watch: {$route}`确保页面更新。
391 5
|
JavaScript UED
vue项目强制刷新当前页面无空白
vue项目强制刷新当前页面无空白
94 0
|
缓存 JavaScript 前端开发
Vue 实现前进刷新,后退不刷新的效果
Vue 实现前进刷新,后退不刷新的效果
109 0
|
JavaScript 前端开发 索引
Vue 改变数据,页面不刷新的问题
Vue 改变数据,页面不刷新的问题
165 0
|
JavaScript
js实现当前页面关闭功能
js实现当前页面关闭功能
127 0
|
JavaScript 容器
vue项目切换页面会白屏,刷新之后才会正常显示(已解决)
vue项目切换页面会白屏,刷新之后才会正常显示(已解决)
609 0
|
JavaScript
解决vue路由跳转后页面滚动位置问题
解决vue路由跳转后页面滚动位置问题
114 0