Question

好的，简单解释一下：

我有3x页面。

Page 1（主页）
第2页（菜单）
第3页（关于）

第1页有一个 -

localhost

按钮，点击路由到“/ menu”。

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

<router-link  to="/menu">

按钮，当单击此按钮时，它将恢复到之前的位置“/”Page 1（Home）。

但我不想为每个页面创建路由器组件以“返回”到上一页（就好像我有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

这对我来说就像一个时钟

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 3

直接使用router.back()在vue-router上以编程方式返回/返回路由。

Answer 4

如果您正在编写移动应用程序，这个问题的答案会变得更加棘手，因为您现在需要一个集成的解决方案来适应来自您的 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 5

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

只需使用以下命令在主文件中初始化它：

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

每次路线更改都会更新route中的Vuex州对象。接下来您可以创建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 6

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

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

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

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

6 个答案: