【VUE】在不刷新浏览器的情况下如何重载当前页面组件

最新推荐文章于 2025-03-17 15:05:00 发布

dreamandxiaochouyu

最新推荐文章于 2025-03-17 15:05:00 发布

阅读量1.5k

点赞数

分类专栏： vue.js 文章标签： vue 刷新页面重载组件

版权

3 篇文章

订阅专栏

本文介绍了一种在Vue应用中优雅地重载页面组件的方法，避免了直接刷新页面带来的用户体验下降。通过保存当前页面路由，跳转至空白页再返回，实现了数据更新后的即时预览。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

众所周知，刷新页面产生的空白页停留感用户体验非常差。

典型如下操作：

this.$router.go(0);

因为VUE无法在当前页面组件下执行如下操作：

this.$router.push("当前页面的PATH");

这导致我们有时候在某个页面修改了某些数据，想要在当前页面看到更改后的效果比较困难。

如何优雅的重载一个页面组件而不刷新浏览器页面呢？这里介绍一种思路，虽然看似愚蠢，但是实践表明，感觉很棒。

思路：在当前页面组件中，执行完毕某种更改数据操作之后，先把当前页面组件的路由PATH存起来，然后跳转到一个空白页面组件，在空白页面组件CREATED的过程中，再次让路由跳回之前的组件。

1、在当前组件中建立一个函数refresh，将当前页面路由PATH写进全局变量

methods:{
  refresh(){
    this.global.routePath=this.$route.path;
    this.$router.push('/refresh').catch(err=>{err});
  },

2、refresh页面组件的created

created(){
  this.$router.push(this.global.routePath);
}

3、当前组件执行刷新

this.refresh();

此方法虽然看上去很古板，但是效果很不错。