vue.js - 如何在 vue-router 中查看导航历史记录？

Question

我有一个 vue.js 应用程序，我想在 vue-router 中查看导航历史记录。我的组件中有一个 beforeRouteLeave 钩子(Hook)，并在其中放置了一个断点。它到达断点，我在控制台中输入 this.$router。它输出 $router 对象，但我没有看到代表我在网站上导航历史的实际 url 堆栈。

这就是我所看到的:

currentRoute: (...)
app: Vue {_uid: 3, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
apps: [Vue]
options: {mode: "history", linkActiveClass: "active", routes: Array(47), scrollBehavior: ƒ}
beforeHooks: []
resolveHooks: []
afterHooks: [ƒ]
matcher: {match: ƒ, addRoutes: ƒ}
fallback: false
mode: "history"
history: HTML5History {router: VueRouter, base: "", current: {…}, pending: {…}, ready: true, …}
__proto__: Object

(我可以扩展它，但我认为这太大了。)

实际的导航堆栈在哪里？

如果您想知道为什么我需要查看导航堆栈，那是因为，当我单击浏览器上的后退按钮时，我怀疑导航堆栈正在弹出，即使调用了我的 beforeRouteLeave 钩子(Hook)并且我不调用 next ()。我在 beforeRouteLeave 中弹出一个带有选项的弹出窗口:“离开”或“留下”。如果用户点击“停留”，我会停留在页面上。它似乎可以解决问题(它不会离开当前页面)，但是如果我在浏览器上单击刷新，它会刷新上一页。或者，如果我说“留下”一次，然后再次单击返回按钮并说“离开”，我会返回两页。

所以我想看看导航堆栈发生了什么。无论在 beforeRouteLeave 中是否调用 next() 都会弹出它，至少当我单击后退按钮时？或者是发生了其他事情。

谢谢。

Answer 1

它目前尚未实现，尽管您可以使用路由器导航保护(路由更改 Hook )作为中间件来存储 from和 to参数对象并使用这些值编写您的逻辑。

只要确保你调用了 next() 函数，否则你将存储日志而不是调用下一个路由。

在此处查看文档:https://router.vuejs.org/guide/advanced/navigation-guards.html