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

How can I go back/route-back on vue-router?

提问by John107

Ok, to explain this simply:

好吧，简单解释一下：

I have 3x pages.

我有 3x 页。

• Page 1 (Home)
• Page 2 (Menu)
• Page 3 (About)

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

Page 1 has a-

第 1 页有一个-

<router-link  to="/menu">

button that when clicked routes to "/menu".

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

For now, Page 2 (Menu) has a

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

<router-link  to="/">

button and when this button is clicked it reverts to the previous location "/" Page 1 (Home).

按钮，当单击此按钮时，它会返回到之前的位置“/”第 1 页（主页）。

But I don't want to create a component for router for each page to 'go back' to the previous page (as if I had 100 pages this could be a lot of work routing back). Is there a way to do this with vue-router? similar to window.history.back()

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

Curious to see if there is a way to do this as I can't find it in the docs.

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

Thanks in advance! John

提前致谢！约翰

回答by José Fernando Davila

You can use Programmatic Navigation.In order to go back, you use this:

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

router.go(n) 

Where ncan be positive or negative (to go back). This is the same as history.back().So you can have your element like this:

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

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

回答by yeikiu

This works like a clock for me:

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

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

Then, in the template:

然后，在模板中：

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

回答by ojczeo

If you're using Vuexyou can use https://github.com/vuejs/vuex-router-sync

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

Just initialize it in your main file with:

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

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

Each route change will update routestate object in Vuex. You can next create getterto use the fromObject in route state or just use the state(better is to use getters, but it's other story https://vuex.vuejs.org/en/getters.html), so in short it would be (inside components methods/values):

每条路线的变化将更新route状态的对象Vuex。您可以接下来创建getter以from在路由状态中使用对象或仅使用state（更好的是使用 getter，但它是另一个故事 https://vuex.vuejs.org/en/getters.html），所以简而言之就是（内部组件方法/值）：

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

You can also just place it in <router-link>component:

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

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

So when you use code above, link to previous path would be dynamically generated.

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

回答by ittus

Another solution is using vue-router-back-mixin

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

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

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