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

Question

好的,简单地解释一下:

我有3x页面.

• 第1页(首页)
• 第2页(菜单)
• 第3页(关于)

第1页有 -

<router-link  to="/menu">

点击的按钮路由到"/ menu".

目前,第2页(菜单)有一个

<router-link  to="/">

按钮,单击此按钮时,它将恢复到之前的位置"/"Page 1(Home).

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

很想知道是否有办法这样做,因为我在文档中找不到它.

提前致谢!约翰

Answer 1

您可以使用程序化导航.要返回,您可以使用:

router.go(n) 

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

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

Answer 2

使用$router.back()直接回去VUE-路由器/路由回程序。或者如果在组件的模板中使用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

为我工作，简短而实用。(Nuxt.js)

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

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>

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