VUE 刷新路由不抖动

lwzy1314

于 2021-09-02 17:21:44 发布

阅读量241

点赞数

CC 4.0 BY-SA版权

分类专栏：笔记文章标签： vue.js javascript

本文链接：https://blog.csdn.net/lwzy1314/article/details/120065931

笔记专栏收录该内容

39 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中通过修改App.vue和注入reload方法，实现组件状态的刷新。通过提供reload函数并注入子组件，开发者可以在需要时调用该函数轻松刷新组件内容。

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

第一步，修改项目中的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(() => {
        this.isRouterAlive = true
      })
    }
  }
}
</script>

第二步，在需要刷新的组件下面地方加上：

export default {
  inject: ['reload'],
......
}

第三步，在使用的时候调用this.reload().

例如下面：

handleClick() {
  this.reload();
},

这样就解决咯