vue项目如何刷新当前页面

最新推荐文章于 2023-08-30 10:25:30 发布

carrie~苗

最新推荐文章于 2023-08-30 10:25:30 发布

阅读量199

点赞数

分类专栏：页面刷新文章标签： vue

本文链接：https://blog.csdn.net/qq_43146962/article/details/106420282

版权

本文介绍了在Vue项目中刷新当前页面的三种方法，包括使用vue-router重新路由、使用window.reload()或router.go(0)，以及推荐的利用provide/inject组合的方式。通过在App.vue组件中声明reload方法，并在需要刷新的页面注入该方法，可以在不重新加载整个浏览器的情况下实现页面刷新，提高用户体验。

摘要由CSDN通过智能技术生成

解决办法：
1.用vue-router重新路由到当前页面，但是页面是不进行刷新的
2.采用window.reload()，或者router.go(0)刷新时，但是整个浏览器进行了重新加载，闪烁，体验不好
3.推荐办法：用provide / inject 组合
原理：允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效
在App.vue，声明reload方法，控制router-view的显示或隐藏，从而控制页面的再次加载

<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组件提供（provide）的 reload 依赖࿰