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

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐