Pug模板中href链接出现[object Object]异常求助

问题现象 #

使用Express结合Pug渲染目录列表时，subdir.pug中通过a(href='users/' + user + '/' +val)拼接的链接出现错误格式，例如：

/users/mihir/users/[object%20Object]/file.txt

但index.pug采用相同写法却能正常生成正确链接。

错误原因定位 #

对比两处渲染逻辑的差异，核心问题出在subdir页面的路由参数传递错误：

在渲染subdir的GET路由（正则匹配/users/[a-zA-Z0-9_-]+/.*）中，错误地将req.body赋值给了username：

app.get(/^\/users\/[a-zA-Z0-9_-]+\/.*$/, (req, res) => {
  const username = req.body; // 这里是错误根源！
  // ...其他代码
  if (stats.isDirectory()) {
    res.render('subdir', { title: title + req.path, listing: fs.readdirSync(filepath), user: username })
  }
});

GET请求中req.body本身是空对象（body-parser仅处理POST请求的表单数据），所以传递给Pug模板的user参数是一个空对象，当和字符串拼接时，对象会被转为[object Object]，最终导致链接错误。

反观正常工作的index路由，是从req.query.user正确获取用户名：

app.get('/index', (req, res) => {
  const username = req.query.user; // 正确获取查询参数中的用户名
  res.render('index', { ..., user: username })
});

修复方案 #

修改渲染subdir的路由代码，从URL中正确提取用户名：

步骤1：调整路由正则，捕获用户名参数 #

将原正则路由修改为带捕获组的形式，方便提取用户名：

app.get(/^\/users\/([a-zA-Z0-9_-]+)\/.*$/, (req, res) => {
  const username = req.params[0]; // 从捕获组获取用户名
  const filepath = path.join(__dirname, req.path);
  const stats = fs.statSync(filepath);

  if (stats.isDirectory()) {
    res.render('subdir', { 
      title: title + req.path, 
      listing: fs.readdirSync(filepath), 
      user: username 
    });
  } else {
    console.log("Request to view a file");
    res.sendFile(filepath);
  }
});

步骤2：优化Pug链接写法（可选） #

为避免相对路径拼接问题，可以改用绝对路径拼接，更可靠：

// subdir.pug中修改链接为绝对路径
a(href='/users/' + user + '/' + val) !{val}

额外注意事项 #

• 确保路由顺序正确：带捕获组的正则路由要放在通用的/users/*路由之前，避免被覆盖。
• 添加错误处理，比如当fs.statSync失败时返回404，避免服务器崩溃。

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