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)
  },