Vue3使用script setup导致this.$route不生效

Vue3使用script setup导致this.$route不生效

描述

<script setup>
import { reactive } from "vue";
const data = reactive({
    form: {
        id:this.$route.params.id
    }
})

</script>

原本想要通过this.$route获取传进来的id，结果报错：

TypeError: Cannot read properties of undefined (reading '$route')

经过一番折腾，发现是this指针的原因。由于setup是在解析其它组件选项之前被调用的，this不会是该活跃实例的引用。

Vue为了避免我们错误使用，将this修改成了undefined

解决方案

使用useRoute()方法来获取route

<script setup>
import { reactive } from "vue";
import { useRoute } from "vue-router";

const route = useRoute()

const data = reactive({
    form: {
        id: route.params.id,
    }
})

</script>