Vue中获取路由参数的问题

本意：通过获取路由中的参数传入方法中调用接口获取数据。
问题：当时想的是使用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进行路由变化的监听。