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文档：

  

就像router.push一样，唯一的区别是它导航时没有推送新的历史记录条目，顾名思义-它替换了当前条目。

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

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

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

Answer 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>