当 Aurelia 在 URL 中看到 # 并尝试重新路由时单击页面链接（片段标识符）时，如何阻止 Aurelia 抛出 JS 错误？

Question

有了这个简单的锚点 link 和锚点目标 - 最初由 Tim Berners-Lee as a HTML Fragment Identifier - is there a way to stop a false JavaScript error from appearing in Aurelia?

定义

HTML:

<a href="#in-page-link">In Page Link</a>
...
<a name="in-page-link">The link scrolls/jumps here</a>

JavaScript 路由器错误 #1（不是真正的错误）：

Error: Route not found: /in-page-link

这是误报。当然是找不到了！这是 link 页内的！这不是路线！ JS“错误”不是真正的错误。

有没有一种方法可以抑制该错误，而不必过度设计 JavaScript 解决方案 - 测量滚动高度和调整页面偏移 - 只需绕过有缺陷的 Node.js 设计范例，其中路由器 break 一个基本的 HTML feature 来创建正则表达式路径又名：路由？为什么我需要为框架损坏的东西发明一个 JS 修复程序？如果你打破它，你会修复它，对吗？

我试过使用 Aurelia 的 router-ignore idea, but it doesn't work for links which start with hash tags. This similar SO answer doesn't work (& the 2nd line of the OP question was incorrect):

是否有路由器配置 BYPASS 功能，不会尝试将 URL 重新路由到另一个位置？我试过在路由器配置中使用 nav: false，但它需要 moduleId。没有 moduleId 页内 link 目标。

使用基本的路由器配置 JSON 像这样阻止...

{
   name: 'no_redirect',
   route: ['in-page-link'],
   nav: false
}

...我如何阻止第一个 JavaScript 错误（上面）或这个额外的 JavaScript 错误出现，考虑到页面 links 不会有也不需要使用这些：moduleId、redirect、navigation 或 viewPort？这只是页数 link.

JavaScript 路由器错误#2：

Uncaught (in promise) Error: Invalid Route Config for "in-page-link": You must specify a "moduleId:", "redirect:", "navigationStrategy:", or "viewPorts:".

我正在尝试使这个 HTML link 工作，而不是让 Aurelia 向 console.log 抛出错误的 JavaScript 错误。有简单的方法吗？

<a href="#in-page-link">In Page Link</a>
...
<a name="in-page-link">The link scrolls/jumps here</a>

Answer 1

我找到了解决问题的方法！

我尝试让它与锚点 links 和 router-ignore 一起使用，但这些都不适用于我正在构建的站点。也许它使用的是旧版本的 Aurelia，它还没有 router-ignore 功能？可能是。我不知道。我没查。

其中有一个 open bug for my 1st JavaScript error on GitHub. It also has an interesting router configuration，可以解决我的第二个 JavaScript 错误。

我发现了一个更快更简单的 work-around，其他 Aurelia 开发人员可能会喜欢它！

我联系了 Rob Eisenberg, who was kind enough to point me to his discord.aurelia.io site. While searching it, I found an interesting work-around idea! After exploring it & the related code examples, I was able to get the 1st false JavaScript error to disappear... without having to over-engineer any browser pixel measuring logic! I really didn't want to have to write any JS scrollbar math again, using clientOffset values. Here is a good example of measuring the scrollbar height。

我过去曾多次编写过这样的代码，但我想避免重新发明那个轮子……又一次！我真的很想找出另一种方法来解决这个基本问题，而不必编写任何自定义滚动条数学逻辑，因为感觉我写了太多代码来修复底层框架中的错误。除了 Aurelia 之外，其他框架也遭受劫持 URL 中的“#”来创建路由。这似乎是 Node.js 社区中反复出现的问题。

Aurelia 的 fast work-around 超小、快速且易于实施。也许有人会喜欢这个！

将 <a href="#in-page-link"> 更改为 <div class="link" click.trigger="jumpDown()">。
在 behind-the-scenes 匹配的 JavaScript 文件中添加一个方法，它设置一个布尔值：

jumpDown () {
   this.linkClicked = true;
}

将 <a name="in-page-link"> 更改为 <button class="btn" focus.bind="linkClicked">。
使用 CSS 设置 link 的样式，并根据需要添加 cursor: pointer; 属性并隐藏任何按钮样式。

所以最终代码看起来像这样：

HTML:

<div class="link" click.trigger="jumpDown()">In Page Link</div>
...
<button class="btn" focus.bind="linkClicked">The link scrolls/jumps here</button>

JavaScript:

jumpDown () {
   this.linkClicked = true;
}

CSS:

.btn {
   /* Style as desired. */
}

.link { 
   color: #0000FF;
   cursor: pointer;
   text-decoration: underline;
}

然后原来的 JavaScript 错误 #1 消失了！ link 点击仍然有效！无需额外的路由器配置！ Web 开发人员看起来像网络摇滚明星！质量保证团队很高兴！问题已解决！

当 Aurelia 在 URL 中看到 # 并尝试重新路由时单击页面链接（片段标识符）时，如何阻止 Aurelia 抛出 JS 错误？

How do I stop Aurelia from throwing JS Errors, when clicking in page links (Fragment Identifiers) when it sees a # in the URL & attempts to reroute?

html

router

aurelia