如何查看 Vue / Nuxt.js 中的浏览历史记录？

Question

我正在研究 nuxt.js 项目并想问一个问题。 当我使用引导程序的 modal显示模式时，它是否会将 URL 堆叠到浏览器查看历史记录中？

这是我目前遇到的问题的详细信息。 我有两页，分别是 A 和 B 页。

• 页面 A 有一个链接到页面 B 的按钮，我使用了 $router.replace 的programmatic navigation 。 所以历史不应该添加。
• 页面 B 有一个显示模态的按钮，而模态有一个模态关闭按钮，它从字面上关闭模态并返回到页面 B。

问题是，一旦我打开和关闭模式，我必须按浏览器的后退按钮两次才能返回页面 A。例如，在页面 B 上显示模式 -> 在页面 B 上关闭模式 -> 按浏览器的后退按钮（但 URL 没有改变，仍然停留在页面 B) -> 再次按下浏览器后退按钮，然后返回页面 A。

所以我想通过使用引导程序显示一个模式来添加新的历史条目。

稍后添加这部分

这是模态的代码

// display modal 
<button data-toggle="modal" data-target="#removeModal">show modal</button>

// dismiss modal
<div class="mdal fade" id="removeModal">
    <p data-dismiss="modal">
        <img src="@/assets/img/x-icon.png" alt="X-icon">
    </p>
</div>

Answer 1

您可以通过使用window.history.length来确认这一点并跟踪号码：

• 在模态之前
• 在模态期间
• 在模态之后

这样，您就可以确定它是否真的是 Bootstrap。 同时，我怀疑是不是这样（因为它使用的是vue-portal而不是一些阴暗的历史 API 技巧）。

我确实认为它来自其他地方。 首先，如果您确实打算让 go 返回此页面，为什么要使用replace ？ 另外，为什么不使用nuxt-link来移动到另一个页面呢？

作为替代方案，为了帮助您调试，您可以使用您的 devtools 的Routing - History选项卡，它会准确地向您显示插入到 vue-router 中的内容（如果您有一个正在推送 2 个条目的中间件或 idk？）。

---

编辑，我自己用一个全新的 Nuxt 项目对其进行了测试，它与这两种解决方案和目标页面（索引）上的模式完全符合预期

<nuxt-link :to="{ name: 'index' }" replace>replace index</nuxt-link>
<button @click="$router.replace({ name: 'index' })">replace to index</button>

所以，我想此时您的代码有问题。