如何在vue-router上回退/回退？

好的，简单解释一下：

我有3页。

• 第1页（首页）
• 第2页（菜单）
• 第3页（关于）

第1页有-

<router-link  to="/menu">

单击该按钮将转到“ /菜单”。

目前，第2页（菜单）有一个

<router-link  to="/">

按钮，然后单击此按钮，它将返回到先前的位置“ /”第1页（主页）。

但是我不想为路由器的每个页面创建一个组件以“返回”上一页（好像我有100个页面，这可能会路由很多工作）。有没有办法用vue-router做到这一点？类似于window.history.back（）

好奇是否有办法做到这一点，因为我在文档中找不到它。

提前致谢！约翰

您可以使用程序化导航。要返回，请使用以下命令：

router.go(n) 

其中n可以为正或负（返回）。这与history.back（）相同，因此您可以使用以下元素：

<a @click="$router.go(-1)">back</a>

这对我来说就像一个时钟：

methods: {
 hasHistory () { return window.history.length > 2 }
}

然后，在模板中：

<button 
  type="button"    
  @click="hasHistory() 
    ? $router.go(-1) 
    : $router.push('/')" class="my-5 btn btn-outline-success">&laquo; 
  Back
</button>

使用router.back()直接回去VUE-路由器/路由回程序。

如果您正在使用Vuex，则可以使用https://github.com/vuejs/vuex-router-sync

只需使用以下命令在您的主文件中对其进行初始化：

import VuexRouterSync from 'vuex-router-sync';
VuexRouterSync.sync(store, router);

每次路线更改都会更新中的route状态对象Vuex。接下来，您可以创建在路由状态下getter使用fromObject或仅使用state（更好的方法是使用getter，但这是另一个故事 https://vuex.vuejs.org/en/getters.html），因此简而言之是（内部组件方法/值）：

this.$store.state.route.from.fullPath

您也可以将其放在<router-link>组件中：

<router-link :to="{ path: $store.state.route.from.fullPath }"> 
  Back 
</router-link>

因此，当您使用上面的代码时，将动态生成到先前路径的链接。

另一种解决方案是使用vue-router-back-mixin

import BackMixin from `vue-router-back-mixin`

export default {
  ...
  mixins: [BackMixin],
  methods() {
    goBack() {
      this.backMixin_handleBack()
    }
  }
  ...
}