Vue项目中如何根据URL参数通过TMDB API获取并展示指定电影信息？

你现在的思路绕了弯路——不需要先请求热门电影列表再匹配ID，直接根据URL中的ID调用TMDB的单电影详情API就能拿到对应电影的完整信息，这样更高效也更简洁。

具体修改步骤： #

1. 调整数据变量：把movieInfo改成movieDetail，因为我们要存单部电影的详情，不是列表。
2. 正确提取URL中的ID：注意URL里的ID是字符串，要转成数字和API返回的ID匹配（TMDB的ID是数字类型）。
3. 调用单电影详情API：TMDB的详情接口是https://api.themoviedb.org/3/movie/{movie_id}，把提取到的ID替换到{movie_id}的位置。
4. 移除不必要的confrontID方法：直接在初始化时就用ID请求对应数据，不需要先拿列表再匹配。

修改后的完整代码： #

<template>
    <div v-if="movieDetail" class="movie-detail">
        <h2>{{ movieDetail.title }}</h2>
        <p>{{ movieDetail.overview }}</p>
        <p>评分: {{ movieDetail.vote_average }}/10</p>
        <img :src="'https://image.tmdb.org/t/p/w500' + movieDetail.poster_path" :alt="movieDetail.title">
        <!-- 可根据需求添加更多详情字段 -->
    </div>
    <div v-else-if="errored">加载失败，请稍后重试</div>
    <div v-else>加载中...</div>
</template>

<script>
import axios from 'axios'

export default {
    name: 'MovieDetail',
    data() {
        return{
            movieDetail: null,
            errored: false,
            loading: true
        }
    },
    mounted () {
        // 提取URL中的电影ID
        const urlId = window.location.href.split('/').pop();
        // 转成数字，避免类型不匹配
        const movieId = Number(urlId);

        if (!isNaN(movieId)) {
            axios
                .get(`https://api.themoviedb.org/3/movie/${movieId}?api_key=###&language=it-IT`)
                .then(response => {
                    this.movieDetail = response.data;
                    console.log('电影详情:', this.movieDetail);
                })
                .catch(error => {
                    console.log(error);
                    this.errored = true;
                })
                .finally(() => this.loading = false);
        } else {
            this.errored = true;
            this.loading = false;
            console.log('无效的电影ID');
        }
    }
}
</script>

<style scoped lang="scss">
.movie-detail {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}
img {
    max-width: 100%;
    height: auto;
}
</style>

关键说明： #

• API接口选择：TMDB提供了专门的单电影详情接口，直接传入ID就能获取完整信息，比先拿热门列表再匹配高效得多。
• 类型转换：URL中的ID是字符串，转成数字后才能和API返回的数字类型ID匹配（字符串比较虽偶能生效，但类型统一更稳妥）。
• 状态处理：添加loading和errored状态，给用户清晰的反馈，避免页面空白。
• 图片展示：TMDB的海报需要拼接基础URL，比如https://image.tmdb.org/t/p/w500加上返回的poster_path即可获取海报图。

如果你的项目用了Vue Router，还可以用this.$route.params.id代替手动截取URL，这样更可靠（避免URL带其他参数的情况）。

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