javascript - 单击超链接不会触发旅行

Question

我有一个带有选项卡的 Angular 应用程序。我有一个带有下拉菜单的导航栏，如下所示:

<ul class="dropdown-menu" dropdown-menu>
    <li><a href="/page1">page 1</a></li>
    <li><a href="/page2#/tab1/">page 2</a></li>
    <li><a href="/page2#/tab2">page 3</a></li>
</ul>

当我在第 1 页时，我可以正常前往第 2 页或第 3 页。 URL 发生变化并加载页面以显示该选项卡上的内容。

问题是这样的:当我在第 2 页或第 3 页上时，单击指向其他页面的超链接会导致 url 更改，但该页面不会加载新内容。

如何确保无论我位于哪个页面，超链接的行为都是一致的？

Answer 1

“第 2 页”和“第 3 页”是同一页 (page2)。 URL 中 # 后面的任何内容都是片段标识符，片段标识符指示加载时应发送到页面上的哪个位置。

通常，当您使用“tab1”等变量时，您会让 JavaScript 加载该选项卡(这超出了本问题的范围)

进一步阅读:https://en.wikipedia.org/wiki/Fragment_identifier#Examples (奖励:请注意您的浏览器如何直接将您带到“示例”部分？)

更新:在评论中，您提到希望使页面更改看起来一致...以下代码应该可以工作，因为它向 URL 添加了“查询”参数 - 因此，虽然它仍然指向同一个文件，但浏览器需要刷新 URL，因为它无法确定网络服务器会提供相同的内容。

<ul class="dropdown-menu" dropdown-menu>
    <li><a href="/page1">page 1</a></li>
    <li><a href="/page2?tab=1#/tab1/">page 2</a></li>
    <li><a href="/page2?tab=2#/tab2">page 3</a></li>
</ul>