VueJS 路由器阻止返回某些路由器链接答案

【问题标题】：VueJS Router prevent back on certains router-link'sVueJS 路由器阻止返回某些路由器链接
【发布时间】：2023-04-01 22:20:01
【问题描述】：

使用 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>

当然，我不想在全球范围内这样做。如果这可能吗？

【问题讨论】：

stackoverflow.com/questions/50621920/…的可能重复

标签： vue.js vue-router

【解决方案1】：

你需要使用`router.replace`。

来自 Vue 文档：

它的作用类似于 router.push，唯一的区别是它在导航时不推送新的历史条目，正如它的名字所暗示的那样 - 它替换了当前条目。

在您的情况下，您只需将replace 属性添加到您的router-link 标签：

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

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

【讨论】：

谢谢，这确实是我要找的。我会批准你的回答。

【解决方案2】：

将replace 添加到您的router-link 以避免在导航历史记录中堆积路线：

Vue.config.productionTip = false;
Vue.config.devtools = false;

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }


const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]


const router = new VueRouter({
  routes 
})


const app = new Vue({
  router
}).$mount('#app')

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <h5>Navigate between routes then click "previous"</h5>
  <button @click="$router.go(-1)">Previous</button>
  <p>
    <router-link to="/foo" replace>Go to Foo</router-link>
    <router-link to="/bar" replace>Go to Bar</router-link>
  </p>
  <router-view></router-view>
</div>

【讨论】：

你需要使用router.replace。

你需要使用`router.replace`。