如何在 Vue / Nuxt.js 中查看浏览历史记录？
How can I check the browsing history in Vue / Nuxt.js?
我正在做 nuxt.js 项目，想问一个问题。当我使用 bootstrap's modal 显示模式时，它是否将 URL 堆叠到浏览器查看历史记录中？
这是我目前遇到的问题的详细信息。
我有两个页面，分别是A页和B页。
- A页有个按钮可以link到B页，我用了programmatic navigation的$router.replace。所以历史不应该添加。
- 页面B有一个显示模态的按钮，模态有一个模态关闭按钮，从字面上关闭模态并返回页面B。
问题是，一旦我打开和关闭模式，我必须按浏览器的后退按钮两次才能返回页面 A。
像，
在页面 B 上显示模式 -> 在页面 B 上关闭模式 -> 按浏览器后退按钮（但 URL 没有改变，仍然停留在页面 B） -> 再次按浏览器后退按钮，然后返回页面 A .
所以我想通过使用 bootstrap 显示模态来添加新的历史条目。
稍后添加此部分
这是模态的代码
// 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>
您可以使用以下方式确认这一点：window.history.length 并跟踪号码：
- 模态前
- 模态期间
- 模态之后
这样，您就可以确定它是否真的 Bootstrap。同时，我怀疑这是真的（因为它使用的是 vue-portal 而不是一些不正当的历史 API 技巧）。
我确实认为它来自其他地方。首先，如果您确实打算允许返回此页面，为什么要使用 replace？另外，为什么不使用 nuxt-link 来移动到另一个页面？
作为替代方案，为了帮助您进行调试，您可以使用开发工具的 Routing - History 选项卡，它会准确显示插入到 vue-router 中的内容（如果您有中间件或 idk正在推送 2 个条目？）。
编辑，我自己用一个全新的 Nuxt 项目对其进行了测试，它完全按预期使用了这两种解决方案和目标页面（索引）上的模式
<nuxt-link :to="{ name: 'index' }" replace>replace index</nuxt-link>
<button @click="$router.replace({ name: 'index' })">replace to index</button>
所以，我猜此时您的代码有问题。
我正在做 nuxt.js 项目，想问一个问题。当我使用 bootstrap's modal 显示模式时，它是否将 URL 堆叠到浏览器查看历史记录中？
这是我目前遇到的问题的详细信息。 我有两个页面，分别是A页和B页。
- A页有个按钮可以link到B页，我用了programmatic navigation的$router.replace。所以历史不应该添加。
- 页面B有一个显示模态的按钮，模态有一个模态关闭按钮，从字面上关闭模态并返回页面B。
问题是，一旦我打开和关闭模式，我必须按浏览器的后退按钮两次才能返回页面 A。 像， 在页面 B 上显示模式 -> 在页面 B 上关闭模式 -> 按浏览器后退按钮（但 URL 没有改变，仍然停留在页面 B） -> 再次按浏览器后退按钮，然后返回页面 A .
所以我想通过使用 bootstrap 显示模态来添加新的历史条目。
稍后添加此部分
这是模态的代码
// 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>
您可以使用以下方式确认这一点：window.history.length 并跟踪号码：
- 模态前
- 模态期间
- 模态之后
这样，您就可以确定它是否真的 Bootstrap。同时，我怀疑这是真的（因为它使用的是 vue-portal 而不是一些不正当的历史 API 技巧）。
我确实认为它来自其他地方。首先，如果您确实打算允许返回此页面，为什么要使用 replace？另外，为什么不使用 nuxt-link 来移动到另一个页面？
作为替代方案，为了帮助您进行调试，您可以使用开发工具的 Routing - History 选项卡，它会准确显示插入到 vue-router 中的内容（如果您有中间件或 idk正在推送 2 个条目？）。
编辑，我自己用一个全新的 Nuxt 项目对其进行了测试，它完全按预期使用了这两种解决方案和目标页面（索引）上的模式
<nuxt-link :to="{ name: 'index' }" replace>replace index</nuxt-link>
<button @click="$router.replace({ name: 'index' })">replace to index</button>
所以，我猜此时您的代码有问题。