vue.js - VueJS 路由器防止返回某些路由器链接

Question

使用 VueJS 构建 PWA 应用程序，我有像导航组件这样的选项卡。但不是显示/隐藏内容，导航是通过 Vue Router 完成的。此导航的副作用是“后退”按钮行为，每个导航操作都记录在浏览器历史记录中，在我访问 4 个选项卡之后，如果我想返回到带有选项卡的页面之前的实际页面，我需要按“后退” "4 次或更多次(取决于我浏览选项卡的次数)。

我想做的是这样的:

<router-link no-history="true" to="tab1">Tab1</router-link>
<router-link no-history="true" to="tab2">Tab2</router-link>
<router-link no-history="true" to="tab3">Tab3</router-link>

当然，我不想在全局范围内进行。如果这可能的话？

Answer 1

您需要使用router.replace .

来自 Vue 文档:

It acts like router.push, the only difference is that it navigates without pushing a new history entry, as its name suggests - it replaces the current entry.

在您的情况下，您只需要添加 replace属性给你的 router-link标签:

<router-link to="tab3" replace>Tab3</router-link>

您可以找到有关 replace 的更多信息在 Vue programmatic navigation doc