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

【问题标题】：How can I check the browsing history in Vue / Nuxt.js?如何查看 Vue / Nuxt.js 中的浏览历史记录？
【发布时间】：2021-04-16 02:11:42
【问题描述】：

我正在开发 nuxt.js 项目并想问一个问题。当我使用bootstrap's modal 显示模式时，它是否会将 URL 堆叠到浏览器查看历史记录中？

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

页面A有一个链接到页面B的按钮，我使用了programmatic navigation的$router.replace。所以历史不应该添加。
页面 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>

【问题讨论】：

贴出你正在使用的代码。
您好。很抱歉回复晚了。我无法解决我遇到的问题，但感谢您的建议，我现在可以看到路由的历史记录。所以这真的很有帮助。我认为显示模式存在错误，这就是发生此路由问题的原因。

标签： javascript vue.js nuxt.js bootstrap-modal

【解决方案1】：

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

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

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

我确实认为它来自其他地方。首先，如果您确实打算允许返回此页面，为什么要使用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>

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

【讨论】：