本意:通过获取路由中的参数传入方法中调用接口获取数据。
问题:当时想的是使用mounted钩子实现,结果没有获取到参数(this.$route.query.class_id
)
下面是我没解决时的代码:
mounted () {
this.getClassDetail()
},
methods: {
// 获取班级信息
async getClassDetail () {
let res = await getClassDetail({
class_id: this.$route.query.class_id
});
if (res.code == 200) {
this.data = res.data
console.log(this.data)
}
}
},
解决办法
代码如下所示:
mounted () {
},
methods: {
// 获取班级信息
async getClassDetail () {
let res = await getClassDetail({
class_id: this.$route.query.class_id
});
if (res.code == 200) {
this.data = res.data
console.log(this.data)
}
}
},
watch: {
//监听路由的变化
$route () {
this.getClassDetail()
}
}
原因是:当vue实例挂载后,路由参数未传递到地址栏,所以获取不到路由参数,需要使用watch进行路由变化的监听。