Vue动态路由参数改变,视图不更新

如果你的Vue项目中通过Vue-Router设置了动态路由,路由参数发生变化,组件不切换的情况下,可能会出现视图不刷新的现象,对于这种情况很简单,只要监控路由参数变化,然后重新请求后端更新数据就可以。

官方相关文档解释响应路由参数的变化

方法一

通过watch监控$route是否发生变化,如果变化了执行相关代码,从后端请求新的数据,更新视图绑定的数据,视图更新。

把下面代码直接复制到动态路由对应的Vue组件中,根据自己项目更改相关函数或参数即可。

  watch: {
    '$route'(to, from) {
      //路由参数发生变化,执行相关函数更新数据
      //this.$route.params.id:<router-link>传递的参数
      this.init(this.$route.params.id)
    }
  },

方法二beforeRouteUpdate

官网相关文档导航守卫

beforeRouteUpdate代码的用法和上面watch用法相同,在动态路由对应的vue组件中执行即可。

  beforeRouteUpdate (to, from, next) {
    next()//注意执行next()
    //根据新的路由参数更新视图对应的数据
    this.init(this.$route.params.id)
  },