VUE 刷新当前路由的方法

有一个需求是新增一条数据，成功后刷新该路由并带入新增数据的信息。$router.push()是没有用的，找了很多刷新路由的方法都不满足我需要的效果，所以结合了网上几种方法来实现当前路由刷新。

主要用到有：<router-link> + 监听路由

1、在模板中加入<router-link>标签

<router-link id="routerLink" :to="routerParams"></router-link>

2、在data中定义跳转的参数

data() {
    return {
      routerParams: {
        path:'productInfo',
        query: {},
      }
    }
}

3、监听$route的变化并重新载入数据

watch: {
   $route: {
      handler(newValue, oldValue) {
          this.init()
          setTimeout(() => {
                // 注意： appMain为容器的ID，这里需要改成自己需要滚动的容器ID
                document.getElementById("appMain").scrollTop = 0
          },200)
      },
      deep: true
    }
},

4、设置路由参数，主动触发<router-link>的点击事件

// 最后一步，把以下代码粘贴到需要刷新路由的地方
this.$set(this.routerParams, 'query' , { id: '150332000416' })
setTimeout(() => {
  let e = document.createEvent("MouseEvents");
      e.initEvent("click", true, true);
      document.getElementById("routerLink").dispatchEvent(e);
},50)

至此，一个在当前页面刷新路由的功能就完成了，听懂掌声！！！！！！