ReferenceError: route is not defined

你遇到的错误是： ``` ReferenceError: route is not defined ``` 这个错误是因为你在 `updateForm()` 函数中使用了 `route` 变量，但没有在 `<script setup>` 中导入它。 --- ## ✅ 问题原因 你在这段代码中使用了 `route`： ```js const productId = route.params.id || route.query.id ``` 但在 Vue3 的 `<script setup>` 语法中，你需要显式地从 `vue-router` 中导入 `useRoute` 来获取当前路由对象。 --- ## ✅ 解决方案 ### ✅ 第一步：导入 `useRoute` 在你的 `<script setup>` 脚本顶部添加以下内容： ```js import { useRoute } from 'vue-router' ``` 然后在组件内部调用： ```js const route = useRoute() ``` ### ✅ 第二步：确保在 `setup()` 或 `onMounted` 中使用 你现在应该在 `updateForm()` 中正确使用 `route` 变量了。 --- ## ✅ 修改后的完整 `updateForm` 示例： ```js import { useRoute, useRouter } from 'vue-router' import { ElMessage, ElLoading } from 'element-plus' const route = useRoute() const router = useRouter() const updateForm = async (formEl) => { if (!formEl) return const loading = ElLoading.service({ fullscreen: true }) await formEl.validate((valid, fields) => { if (valid) { console.log('开始提交...') // 获取当前商品 ID const productId = route.params.id || route.query.id if (!productId) { ElMessage.error('商品 ID 不存在，无法更新') loading.close() return } ruleForm.id = productId // 调用 API 更新商品信息 productApi.update(ruleForm).then(res => { ElMessage.success('更新成功') router.push('/home/product/list') // 可选跳转回列表页 }).catch(err => { console.error('更新失败:', err) ElMessage.error('更新失败，请重试') }).finally(() => { loading.close() }) } else { console.log('表单验证失败:', fields) ElMessage.error('请检查输入内容') loading.close() return false } }) } ``` --- ## ✅ 总结 | 错误 | 原因 | 解决方法 | |------|------|----------| | `ReferenceError: route is not defined` | 没有导入 `useRoute()` | 使用 `import { useRoute } from 'vue-router'` | --- ## ✅ 相关知识点扩展 - `useRoute()`：用于获取当前路由信息（如 params、query） - `useRouter()`：用于进行页面跳转（push、replace 等） --- ##