好吧,简单解释一下:
我有3x页。
- 第1页(主页)
- 第2页(菜单)
- 第3页(关于)
第一页有-
<router-link to="/menu">
按钮,单击该按钮时将转到“/menu”。
目前,第2页(菜单)有一个
<router-link to="/">
按钮,当单击此按钮时,它将恢复到以前的位置“/”第1页(主页)。
但是我不想为router创建一个组件,让每个页面都“返回”到上一页(如果我有100个页面,那么返回路由可能会有很多工作)。有没有办法用vue-router来实现这一点?类似于window.history.back()
好奇地想看看是否有一种方法可以做到这一点,因为我找不到它的文件。
先谢谢你!约翰
9条答案
按热度按时间i5desfxk1#
你可以使用Programmatic Navigation。为了返回,你可以使用:
其中
n
可以是正的也可以是负的(返回),这和history.back()
是一样的,所以你可以把元素写成这样:ckocjqey2#
直接使用
$router.back()
在vue-router上返回/route-back编程。或者如果在组件的模板中使用router.back()
。f1tvaqid3#
这对我来说就像一个时钟:
然后,在模板中:
rggaifut4#
对我很有效,简短实用。(Nuxt.js)
ajsxfq5m5#
如果使用的是
Vuex
,则可以使用https://github.com/vuejs/vuex-router-sync只需在主文件中使用以下命令初始化它:
每次路由更改都会更新
Vuex
中的route
状态对象。接下来可以创建getter
以在路由状态中使用from
对象,或者只使用state
(最好使用getter,但这是https://vuex.vuejs.org/en/getters.html的另一个故事),因此简而言之,它将是(内部组件方法/值):您也可以将其放置在
<router-link>
组件中:因此,当您使用上面的代码时,将动态生成到上一个路径的链接。
pbpqsu0x6#
如果您正在编写一个移动的应用程序,这个问题的答案将变得更加棘手,因为您现在需要一个集成的解决方案,以适应来自UI后退按钮或移动设备提供的“后退”按钮的后退历史记录!
像Ionic和Quasar这样的框架可以拦截移动的设备的后退按钮事件。Quasar会为您处理这些事件,并调整桌面和移动平台构建的行为,例如Cordova/Capacitor移动应用构建将确保“后退”操作可以智能地关闭对话框或返回页面,甚至关闭应用!
v-go-back
指令dauxcl2d7#
如果您想在Nuxt中执行此操作,此方法对我很有效
e37o9pze8#
这也许能帮到某人
kb5ga3dv9#
另一种解决方案是使用vue-router-back-mixin