为什么 'route.params.id' unavailable/undefined 在设置方法中？

Question

我正在使用 vue-router 和 Vue 3。我想使用路由器 url 并使用它来调用方法来访问 API .此方法 returns 我可以用来填充我的页面的承诺。当用 'route.params.id' 调用我的方法时，它说参数未定义。当我执行 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);
    });

我应该如何确保在调用我的方法时此值可用？

Answer 1

您将 route.params.id 作为变量提供给 getMovie(body)。

然后您将在 URL 中使用 body.id。这将等于未定义的 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}`
  );
}

为什么 'route.params.id' unavailable/undefined 在设置方法中？

Why is 'route.params.id' unavailable/undefined in setup method?

vue.js

vue-router

vue-component

vuejs3