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