项目场景:
网易云项目中点击播放页的小列表进行传参,使播放页地址栏的参数变化,页面内容却不更新!
问题描述
网易云项目中播放页的参数变化,页面内容不变
原因分析:
点击列表中的歌曲,地址变化,发现手动刷新后页面中的数据就会变化
解决方案:
- 通过watch监听地址栏变化,这是vue-router官方给出的解决办法。
watch: {
$route(to, from) {
if (this.$route.query.参数) {
重新加载一次created或者mounted钩子中的渲染的数据
}
},
// 或者
$route(){
if (this.$route.query.参数) {
重新加载一次created或者mounted钩子中的渲染的数据
}
},
},
- 在小列表中触发点击事件时,直接使用this.$router.go(0)刷新整个页面,简单省事。