有一个需求是新增一条数据,成功后刷新该路由并带入新增数据的信息。$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)

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

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐