Vue 路由跳转相同路径页面不刷新

Vue 路由跳转相同路径页面不刷新

vue 同一路由跳转不走生命周期,导致数据不更新
不管是动态路由,还是传参 都不刷新
办法一:
  使用watch 监听路由变化。手动更新数据。

watch: {
    $route(to, from) {
      if (to.path == "/examine_details") {
        let obj = JSON.parse(to.query.scope);
        this.id = obj.id;
        this.getdata();
      }
    }
  }

办法二 :

使用 <router-view :key="$route.fullPath"/>

使用这个可以完美解决不刷新问题。

使用router-view时,如果在相同路由之间跳转,默认在跳转路由时会采用缓存策略,并不会刷新当前路由组件。
所以生命周期钩子函数并不会触发。

如果想强制刷新,可以在根路由上为其分配一个唯一key。采用$route.fullpath作为其唯一key。这样vue就回认为内部路由每个都是不同的路由,在跳转时便会强制刷新组件

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。