Vue 刷新当前页面路由的方法总结

现在有一种场景,比如删除和增加一条新记录的时候希望当前页面可以重新加载,今天我们就围绕这个主题来解说几个解决方法的思路

思路一:直接刷新整个页面

location.reload();
this.$router.go(0);

这个思路是可以刷新当前页面,缺点就是相当于ctrl+f5刷新的那种,整个页面会重新加载,体验感不佳

思路二:新建一个空白页面

新建一个空白页面refresh.vue

<!-- 空页面,负责中转到目标页面 -->
<template>
  <div></div>
</template>
 
<script>
export default {
  name: 'refresh',
  data () {
    return {
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.$router.replace(from.path)
    })
  }
}
 
</script>
<style scoped>
</style>

from.path为需要刷新页面的地址。

原理就是先跳转到一个空白页面然后立即再跳转到目标路由,实现页面转刷新功能
该方法会再url 地址栏中出现地址的快速切换变动
为什么要用replace而不用push呢,因为push假如刷新成功后点返回会回到refresh页面,replace可以避免这个问题。

思路三:provide/inject 组合

首先需要修改下你的app.vue

<template>
  <div id="App">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  el: "App",
  provide() {
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      isRouterAlive: true,
    }
  },
  method() {
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(function () {
        this.isRouterAlive = true
      })
    }
  }
};
</script>

<style>
</style>

通过声明reload方法,控制router-view的显示或隐藏,从而控制页面的再次加载

在子组件中调用

inject:  ['reload'], //子组件接受值
watch:{
  '$route': function (to, from) {
      this.reload() // 监测到路由发生变化时调用
  }  
},

以上这篇Vue 刷新当前页面路由的方法总结就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持芦苇派。

原创文章,作者:ECHO陈文,如若转载,请注明出处:https://www.luweipai.cn/html/1647870042/