在页面链接片段标识符中单击时，如果Aurelia在URL中看到＃并尝试重新路由，如何阻止Aurelia引发JS错误？

问题描述

有了这个简单的锚链接和锚目标（最初由Tim Berners-Lee定义为HTML Fragment Identifier），有没有办法阻止错误的JavaScript错误出现在Aurelia中？

HTML：

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

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

错误：找不到路由：/ in-page-link

这是一个错误的肯定错误。当然找不到！这是页面内链接！这不是一条路线！ JS“错误”不是真正的错误。

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

我尝试使用Aurelia的router-ignore想法，但不适用于以哈希标签开头的链接。这个类似的SO答案不起作用（并且OP问题的第二行不正确）：How do I keep on the same page by clicking on internal anchor links,using Aurelia?

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

使用基本的路由器配置JSON这样的块...

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

...考虑到页面链接中将不需要也不需要使用这些错误，如何停止出现第一个JavaScript错误（在上方）或该其他JavaScript错误：moduleId，{{1 }}，redirect还是navigation？只是页内链接。

JavaScript路由器错误＃2：

未捕获（承诺）错误：“页内链接”的路由配置无效：您必须指定“ moduleId：”，“ redirect：”，“ navigationStrategy：”或“ viewPorts：”。

我正在尝试使此HTML链接正常工作，而不会让Aurelia在console.log中抛出错误的JavaScript错误。有简单的方法吗？

viewPort

解决方法

我想出了解决问题的方法！

我尝试使它与锚链接＆router-ignore一起使用，但是这些都不适合我正在构建的网站。也许它使用的是Aurelia的旧版本，而该版本还没有router-ignore功能？也许。我不知道。我没有检查。

我在GitHub上遇到的第一个JavaScript错误是open bug。它还有一个interesting router configuration，可以解决我的第二个JavaScript错误。

我发现了其他Aurelia开发人员可能会喜欢的更快，更简单的解决方法！

我联系了Rob Eisenberg，后者很友好地将我指向他的discord.aurelia.io网站。在搜索时，我发现了interesting work-around idea！探索和the related code examples之后，我得以使第一个错误的JavaScript错误消失了... 而无需过度设计任何浏览器像素测量逻辑！我真的不想再使用clientOffset值编写任何JS滚动条数学。这是a good example of measuring the scrollbar height。

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

用于Aurelia的快速解决方案非常小巧，快速且易于实施。也许有人会喜欢这个！

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

jumpDown () {
   this.linkClicked = true;
}

将<a name="in-page-link">更改为<button class="btn" focus.bind="linkClicked">。
使用CSS设置链接的样式，并根据需要添加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消失了！点击链接仍然有效！无需其他路由器配置！ Web开发人员看起来像Web摇滚明星！质量保证团队很高兴！问题解决了！

aurelia html router router router