vue-router变化,页面不刷新

现象

在页面上操作后,地址的 query execute_status 需要变化,在代码中使用 this.$router.push() 之后,页面没有刷新,脚本没有执行。
40B4296D-4B0F-427B-A432-24B172CB130A.png

原因

两个地址使用的是同一个组件,比起销毁原组件后创建新组件,复用组件的效率更高,所以页面上没有更新。

解决

第一种方案

监听路由$route变化

  watch: {
    '$route' (to, from) {
      // 对路由变化作出响应...
    }
  }

第二种方案

利用路由的钩子函数:beforeRouteUpdate

  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }

详见官网:https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html#%E5%93%8D%E5%BA%94%E8%B7%AF%E7%94%B1%E5%8F%82%E6%95%B0%E7%9A%84%E5%8F%98%E5%8C%96

阅读 1.3k

推荐阅读