允许带有哈希的 href 链接绕过 SammyJS 路由

Allowing href links with hashes on them to bypass SammyJS routing

本文关键字：SammyJS 路由 链接 href 许带 哈希      更新时间：2023-09-26

我定义了以下服务器端 URL 映射：

/main/item1
/main/item2
我

添加了SammyJS路由支持，以便我能够执行以下操作：

/main/item1#/         /* main view */
/main/item1#/topups   /* topup view */

我已经像这样设置了SammyJS：

s.app = Sammy(function() {
    this.get('#/topups', function() {
        console.log('Initializing topups view.');
    });
    this.get('#/', function() {
        console.log('Initializing main view.');
    });
});

问题是，我的页面中有一个摘要部分，该部分重定向到不同"项目"的顶部视图。 例如，我在网址/main/item1#/，并且在此页面中，存在一个标签<a href="/main/item2#/topups">item 2's topups</a>。

我希望被重定向（页面刷新）到新的URL，但是，似乎SammyJS正在拦截/main/item2#/topups调用并简单地运行我定义的this.get('#/topups')路由。

我希望由于哈希、/main/item1和/main/item2之前的 URL 路径不同，因此不会触发 SammyJS 路由。

有没有办法防止这种行为在SammyJS中发生？

我对 Sammy 了解不多，但我可以从任何路由器的行为方式告诉你，它是在路由可能性中捕获第一个匹配项，因此，任何以 #/topups 结尾的内容都将被视为相同，只要它在哈希符号之后。

因此，您最好以这种方式定义路由器：

this.get('#/topups/:item', function() {
    console.log('Initializing topups view for item: '+ item);
})

然后调用具有类似 URL 的页面：

<a href="/main/#/topups/item2">item 2's topups</a>

我希望这就是你要找的

我很

确定使用完整的URL重定向您。

<a href="http://www.example.com/main/item2#/topups">Item 2 top ups for the lazy coder</a>

但是，这将导致页面重新加载。如果你修改Labib的答案，你可以得到一个更好的解决方案：

this.get('#/topups/:item', function () {
  console.log('Doing some post processing on current item');
  console.log('Now redirecting you to ' + this.params.item);
  window.location.href = 'http://example.com/menu/# + this.params.item +#/topups';
});

同样，这将导致页面重新加载，但如果您不介意，那么只需使用任何一种方法。

注意：Sammy还将为您检查表单提交情况。每次使用它时，这都会让我感到困惑。这篇文章有解决方案。

相关文章：