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 刷新当前页面路由的方法总结就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持芦苇派。

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

相关推荐

深入理解position sticky 粘性定位

vue3如何解决reactive()响应式对象初始化重新赋值

满屏import优化方案之使用模块重导（Re-export）

微信小程序封装公共弹窗dailog组件-UNIAPP篇

记录几种常用的弹出层动画样式效果

π • 热门