未在 href 标记上评估 pug 变量答案

【问题标题】：pug variable not evaluated on a href tag未在 href 标记上评估 pug 变量
【发布时间】：2019-01-22 22:43:16
【问题描述】：

在我的 Express JS Web 应用程序中，login 路由将一些变量呈现给登录 pug 视图。

在login.js

router.get('/login', function(req, res, next) {
  var locations = ["Location 1", "Location 2"];
  var count = 0;
  var title = 'Login';
  console.log("req.originalUrl=" + req.originalUrl);

  res.render('login', {
           title: title, // Give a title to our page
           jsonData: locations, // Pass data to the View
           count: locations.length,
           originalUrl: req.originalUrl
      });
});

在login.pug

extends layout

block content
  div(class='container mt-3')
    h2 Welcome to #{title}, #{count}, #{originalUrl}
    a(class="btn btn-primary" href="/location/new" role="button") NEW
    br
    br
    ul#locList(class='list-group')
      for location in jsonData
        li(class="list-group-item")
          a(href='#{originalUrl}' + '?' + location, class='list-group-item list-group-item-action')
            h2=location

a href 中的 originalUrl 变量未评估为“http://localhost:3000/login?Location%201”，而是“http://localhost:3000/login#{originalUrl}?Location%201”。

然后我必须将其更改为“a(href=originalUrl + '?' + location, class='list-group-item list-group-item-action')”才能使其正常工作。

简而言之，a(href='#{originalUrl}') 不工作，而 a(href=originalUrl) 工作，a href。

但是，同一变量在“h2 Welcome to #{title}, #{count}, #{originalUrl}”行被正确评估为“Welcome to Login, 2, /login”。

a href 与 h2 对同一变量的评估有何不同？

【问题讨论】：

这是因为当您在引号内使用 #{variableName} 时，pug 会将其评估为文字字符串。但是当你试图在任何引号之外使用它时，它会理解这是一个变量并使用它的值来代替。

标签： javascript node.js express pug

【解决方案1】：

这是几个版本前出现的已知行为（我认为是 2016 年）。属性中不支持这种#{style} 插值：

注意

Pug/Jade 的早期版本支持插值语法，例如如：

a(href="/#{url}") 链接不再支持此语法。替代品在下面找到。（查看我们的迁移指南了解更多信息有关 Pug v2 和以前版本之间其他不兼容性的信息版本。）

更多信息请见：https://pugjs.org/language/attributes.html

你应该可以使用普通的template literals:

a(href=`${originalUrl}`)

【讨论】：

在链接上添加一个括号，它将起作用，例如a(href=${originalUrl})
@Mark Meyer，谢谢，我一直在寻找答案。我尝试了各种语法技巧，但都没有奏效……你的成功了！

【解决方案2】：

有一种简单的方法可以做到这一点，直接写变量，不使用引号、括号、$、! 或 #，如下所示：

a(href=originalUrl) !{originalURL}

这样做的结果是一个带有 originalURL 中文本的链接

示例：如果 originalUrl = 'www.google.es'

a(href='www.google.es') www.google.es

你终于得到了链接：www.google.es

【讨论】：