如何在 vue-router 上返回/路由返回？

Question

好的，简单解释一下：

我有 3x 页。

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

第 1 页有一个-

<router-link to="/menu">

单击时路由到“/menu”的按钮。

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

<router-link to="/">

按钮，当单击此按钮时，它会恢复到上一个​​位置“/”第 1 页（主页）。

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

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

提前致谢！约翰

Answer 1

您可以使用Programmatic Navigation。为了返回，你使用这个：

router.go(n) 

n 可以是正数或负数（返回）。这与history.back() 相同。因此您可以拥有这样的元素：

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

Answer 2

直接使用$router.back() 在 vue-router 上以编程方式返回/路由返回。或者如果在组件的模板中使用router.back()。

Answer 3

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

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>

Answer 4

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

只需在你的主文件中初始化它：

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

每次路由更改都会更新Vuex 中的route 状态对象。 接下来您可以创建getter 以在路由状态下使用from 对象，或者只使用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>

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

Answer 5

如果您正在编写移动应用程序，这个问题的答案会变得更加棘手，因为您现在需要一个集成的解决方案，该解决方案可以容纳来自您的 UI 后退按钮或移动设备提供的“后退”按钮的返回历史记录！

Ionic 和Quasar 等框架可以拦截移动设备后退按钮事件。 Quasar 为您处理这些事件并为桌面和移动平台构建调整行为，例如 Cordova/Capacitor 移动应用构建将确保“返回”操作可以智能地关闭对话框或返回页面甚至关闭应用程序！

• Quasar Back 事件处理程序和v-go-back 指令

  • https://quasar.dev/vue-directives/go-back

• Ionic - 返回按钮和硬件返回按钮

  • https://ionicframework.com/docs/api/back-button
  • https://ionicframework.com/docs/developing/hardware-back-button

Answer 6

如果您想在 Nuxt 中执行此操作，此方法对我有用

<nuxt-link :to="`${this.$nuxt.context.from.path}`" class="m-0 float-right btn btn-sm btn-sm btn-info">
   <i class="bi bi-plus-lg"></i> {{ $t('back') }}
</nuxt-link>

Answer 7

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

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

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