Vue-使用watch观察路由改变,更新视图获取数据

问题背景:

商品详情中有推荐商品=>点进去同样是进入详情页,改变了路由参数然而页面没有发生相应的变化

image


export default {
data() {
return {
data: {}
}
},
methods: {
getDate() {
// 获取数据
......
},
created() {
this.getDate();
}
}

解决办法:

使用 watch,观察路由,发生变化便重新获取数据更新视图!

export default {
data() {
return {
data: {}
}
},
methods: {
getDate() {
// 获取数据
}
},
watch: {
'$route': 'getDate'
},
created() {
this.getDate();
// 组件创建完成后 调用获取数据的方法
// 这个时候的data已经被observed了
}
}

image

完美解决 ——完

上一篇

TypeScript学习笔记(二)类class