原生JavaScript实现SPA路由时动态商品详情页跳转异常问题求助

数据老陈

2026-9-29

问题排查与修复方案

路由匹配逻辑错误：你当前的商品路由判断是严格等于#product/id，但实际商品链接的hash是#product/[具体id值]（比如#product/1、#product/2），完全不匹配，所以永远进不了这个判断分支。
参数传递缺失：就算进入分支，你调用ui.showSingleProduct()没有传入对应商品数据，方法渲染的时候找不到product对象，自然会报错。
全局currentPath未更新：这个变量是在window.onload执行时仅读取一次window.location.pathname，hash变化不会改变pathname，而且你也没有在hashchange事件里更新这个变量，所以它永远是初始值/。

具体修改代码

修改hashchange事件的匹配逻辑即可：

window.addEventListener("hashchange", () => {
    const CurrentPath = window.location.hash;
    console.log(CurrentPath)
    if (CurrentPath === '#about') {
        container.innerHTML = about;
        console.log(currentPath)
        console.log(CurrentPath)
    } else if (CurrentPath === '#contact') {
        container.innerHTML = contact;
        console.log(currentPath)
        console.log(CurrentPath)
        // 新增正则匹配动态商品路由
    } else if (/^#product\/\d+$/.test(CurrentPath)) {
        // 提取路由里的商品id
        const productId = CurrentPath.split('/')[1];
        // 请求对应商品数据后再渲染
        http.get(`${productsURL}/${productId}`).then(product => {
            ui.showSingleProduct(product);
        })
        console.log(CurrentPath);
        console.log(container.innerHTML)
    }
});