为啥设置方法中的“route.params.id”不可用/未定义？

Posted 2023-02-23

【中文标题】为啥设置方法中的“route.params.id”不可用/未定义？

【英文标题】：Why is 'route.params.id' unavailable/undefined in setup method?为什么设置方法中的“route.params.id”不可用/未定义？

【发布时间】：2021-11-13 12:47:20

【问题描述】：

我正在使用 vue-router 和 Vue 3。我有一个视图，我想在其中获取路由器 url 并使用它来调用方法来访问 API。这个方法返回一个我可以用来填充我的页面的承诺。当使用“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);
    );

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

【参考方案1】：

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

然后您在您的 URL 中使用 body.id。这将等于未定义的 route.params.id.id。

在您的网址中使用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`
  );

【讨论】：

谢谢，解决了我的问题！ :)