vue 在当前页面跳转，修改url地址参数并强制刷新页面 reload

描述：

        在页面A，点击页面A中的某个按钮，携带参数刷新当前页面A。

原因：

        在当前页面跳转到当前页面，相当于 “重复点击选中的导航” 这一操作，通常都会在 router.js 中设置一下代码，使用 $router.replace()、$router.push() 在同一个页面做刷新跳转动作会没有效果。

//重复点击选中的导航时报错问题
const routerPush = VueRouter.prototype.push;
VueRouter.prototype.push = function (location) {
    return routerPush.call(this, location).catch(error => error);
}
const routerReplace = VueRouter.prototype.replace;
VueRouter.prototype.replace = function (location) {
    return routerReplace.call(this, location).catch(error => error);
}

解决办法：

 app.vue 

<template>
  <div id="app">
    <router-view v-if="isRouterAlive"/>
  </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>

 要刷新的页面：

  this.$router.replace({
    path: "/device/history",
    query: {"showHelp":2}
  },()=>{
    that.reload();//刷新页面
  })

参考： 

前端 - vue路由参数变更刷新当前页面_个人文章 - SegmentFault 思否通过this.$router.replace改变当前页面路由地址（单纯改变页面地址页面是不刷新的）结合this.reload()刷新当前页面https://segmentfault.com/a/1190000021268826?sort=votes

其他： 

vue项目刷新当前页面的三种方法_Linux小百科的博客-CSDN博客_vue刷新页面本文介绍了vue项目刷新当前页面的三种方法，本文图文并茂给大家介绍的非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下。想必大家在刨坑vue的时候也遇到过下面情形：比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种：如果希望点击确定的时候，Dialog 对话框关闭的时候，当前http://localhost:9530/#/supplier/supplierAll页面可以重新刷新下那么表格的数据可以重新加载，Dialog 对话框设置的数据可以在确定后刷新出现在页面上https://blog.csdn.net/yaxuan88521/article/details/123307992