为什么是“route.params.Id '在设置方法中不可用/未定义？

我正在使用Vue -router和Vue 3。我有一个视图，我想采取路由器的url，并使用它来调用一个方法访问一个API。这个方法返回一个我可以用来填充我的页面的承诺。当调用我的方法与'route。params。它表示该参数是未定义的。当我执行console。log(route。params。id)时，它在控制台中显示正确。我已经尝试使用计算属性代替，但我有相同的问题。

设置代码:

import { ref } from "vue";
import MovieApiService from "../api/MovieApiService";
import { useRoute } from "vue-router";
export default {
  setup() {
    const movie = ref([]);
    const route = useRoute();
    MovieApiService.getMovie(route.params.id).then((response) => {
      movie.value = response.data.results;
    });
    return {
      movie,
    };
  },
  method: {},
};

方法被调用:

static getMovie(body: GetMovieByTmdbId) {
    return axios.get(
      `https://api.themoviedb.org/3/movie/${body.id}?api_key=${apiKey}`
    );
  }

这是我试图用相同的结果来计算的性质。

setup() {
    const route = useRoute();
    const id = computed(()=>{return route.params.id})
    const movie = ref([]);
    getMovie(id).then((response) => {
      movie.value = response.data.results;
      console.log(movie.value);
    });

我应该如何确保这个值是可用的，当我调用我的方法？

# # #你给route.params.id as a variable to getMovie(body).

然后你在使用身体。id在你的URL。这将等于route。params。id。id，它没有定义。

在你的URL中使用body或将参数改为id，这样更有意义。

是这样的:

...
const route = useRoute();
MovieApiService.getMovie(route.params.id).then((response) => {
  movie.value = response.data.results;
});
...

const getMovie = (id) => {
  return axios.get(
    `https://api.themoviedb.org/3/movie/${id}?api_key=${apiKey}`
  );
}