Vue3中setup方法内route.params.id为何无法获取/显示为undefined？

我来帮你分析下这个问题——明明控制台能看到参数值，但调用API时却拿到undefined，这种情况其实挺常见的，核心原因和Vue组件的执行时机、Vue Router的参数解析逻辑有关：

问题根源 #

1. 路由参数解析时机差：组件的setup函数执行得非常早，有时候Vue Router还没完成当前路由的参数解析工作，这时候直接访问route.params.id自然会拿到undefined。而浏览器控制台里的route对象是动态引用，你看到的是后续参数解析完成后的结果，并不是代码执行瞬间的真实值。
2. 组件复用场景：如果是从同一路由的不同参数页跳转（比如从/movie/123跳到/movie/456），Vue会复用当前组件，setup函数不会重新执行，这时候也无法自动获取新的参数。

另外还要提个小细节：你用计算属性时，computed返回的是一个ref对象，直接传给getMovie的话，方法里拿不到正确的id值，需要用id.value来获取原始值。

解决方案 #

最可靠的方式是通过监听路由参数的变化来触发API调用，既确保参数可用时再执行请求，也能处理组件复用的场景：

方案一：使用watch监听路由参数 #

<script setup>
import { ref, watch } from "vue";
import MovieApiService from "../api/MovieApiService";
import { useRoute } from "vue-router";

const movie = ref([]);
const route = useRoute();

// 封装获取电影数据的函数
const fetchMovie = async (movieId) => {
  if (!movieId) return; // 确保id存在再发起请求
  try {
    const response = await MovieApiService.getMovie({ id: movieId });
    movie.value = response.data.results;
  } catch (error) {
    console.error("获取电影数据失败:", error);
  }
};

// 监听路由参数id的变化，同时初始化时立即执行一次
watch(
  () => route.params.id,
  (newId) => {
    fetchMovie(newId);
  },
  { immediate: true }
);
</script>

方案二：结合onMounted和watch（可选） #

如果你的组件不会被复用，也可以在onMounted里调用请求，但依然建议搭配watch来兼容所有场景：

<script setup>
import { ref, watch, onMounted } from "vue";
import MovieApiService from "../api/MovieApiService";
import { useRoute } from "vue-router";

const movie = ref([]);
const route = useRoute();

const fetchMovie = async (movieId) => {
  if (!movieId) return;
  try {
    const response = await MovieApiService.getMovie({ id: movieId });
    movie.value = response.data.results;
  } catch (error) {
    console.error("获取电影数据失败:", error);
  }
};

// 组件挂载时执行一次初始请求
onMounted(() => {
  fetchMovie(route.params.id);
});

// 监听参数变化，处理组件复用的情况
watch(() => route.params.id, fetchMovie);
</script>

额外注意点 #

• 你的MovieApiService.getMovie方法接收的是一个GetMovieByTmdbId类型的对象，所以调用时要传{ id: movieId }，而不是直接传id值（之前的代码里直接传route.params.id是对的，但用计算属性时要传id.value）。
• 建议用async/await代替.then，代码可读性更好，也更容易捕获和处理错误。

这样修改后，就能确保每次路由参数变化时，都能拿到有效的id值去调用API了。

内容的提问来源于stack exchange，提问作者Mr_Happy