如何将参数从Pug传递到后端JavaScript实现新标签页打开动态链接

你遇到的报错和功能异常是两个核心错误导致的：

• 路由匹配规则错误：Express中?开头的参数属于查询参数，不属于路由参数，你写的app.get('/goto/?url=:url')规则无法匹配/goto/?url=xxx的实际请求，所以触发404报错Cannot GET /goto/。
• API调用上下文错误：window.open是浏览器端专属API，你写在Node.js服务端的Express路由中，不存在window对象，即使路由匹配成功也会抛出未定义错误，完全无法实现新标签页打开的效果。

最简实现（无需后端路由） #

如果没有跳转统计、安全校验等特殊需求，不需要额外写后端路由，直接在Pug的a标签上添加target="_blank"属性即可实现点击后在新标签页打开动态链接：

a(href=url target="_blank")

中间跳转页实现（需后端配合） #

如果需要做点击统计、域名白名校验等逻辑，必须走中间跳转路由，按如下方式修改代码：

1. 修改Pug模板 #

对动态url做编码处理，避免特殊字符导致参数解析异常，同时添加target="_blank"让中间页直接在新标签页打开：

a(href='/goto?url=' + encodeURIComponent(url) target="_blank")

2. 修改Express后端路由 #

服务端不需要调用浏览器API，直接做302重定向即可：

app.get('/goto', (req, res) => {
    const targetUrl = req.query.url;
    // 建议补充域名白名单校验逻辑，避免被恶意利用做钓鱼跳转
    if (!targetUrl) return res.status(400).send('缺少跳转目标参数');
    res.redirect(targetUrl);
});

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