使用对象属性作为a标签href时出现"Cannot GET /src/html/undefined"错误

看起来你遇到的核心问题是item.page这个属性在渲染HTML的时候是undefined，所以点击链接才会跳转到/src/html/undefined这个不存在的路径。咱们一步步来排查和解决：

可能的问题原因及解决方法 #

• 对象实例化时没传对page参数：你提到在对象类里写了this.page = page;，但如果创建Movie对象的时候忘记传入page值（比如写成new Movie(title, poster)而不是new Movie(title, poster, "目标页面路径")），那this.page自然就是undefined。别忘了在构造函数里确认page参数被正确接收，创建实例时也要传全参数。
• Movies数组里的item缺失page属性：可以在displayMovies函数开头加一行调试代码console.log(Movies)，打开浏览器控制台看看数组里的每个对象是不是真的包含page属性，值是不是你预期的路径。
• 路径格式错误：就算page有值，也要检查相对路径是否正确。比如你的目标页面在src/html/下，当前页面在根目录的话，路径应该写成src/html/xxx.html，注意斜杠不要写错。

优化后的代码示例 #

你可以给page加个默认值，避免出现undefined的情况，同时加上调试代码方便排查：

const displayMovies = (Movies) => {
    // 调试：查看Movies数组的具体内容
    console.log('当前Movies数组:', Movies);
    const htmlString = Movies
        .map((item) => {
            // 给page设置默认值，防止undefined
            const targetPage = item.page || '#';
            return `
            <div class="Media-Card">
                <a href='${targetPage}'><img class='Poster' src="${item.poster}" ></img></a>
                <h1 class='Media-Card-Header'>${item.title}</h1>
            </div>
        `;
        })
        .join('');
    searchlist.innerHTML = htmlString;
};

另外，确认你的对象类构造函数是正确接收参数的：

class Movie {
    constructor(title, poster, page) {
        this.title = title;
        this.poster = poster;
        // 确保page参数被赋值给实例属性
        this.page = page;
    }
}

// 创建实例时要传入正确的page路径
const exampleMovie = new Movie("示例电影", "poster.jpg", "src/html/movie-page.html");

备注：内容来源于stack exchange，提问作者CVEWA