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

Question

我有一个 vue.js 应用程序，我想在 vue-router 中查看导航历史记录。我的组件中有一个 beforeRouteLeave 钩子，我在那里放了一个断点。它到达断点，我在控制台中输入 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 钩子被调用而我没有调用 next ()。我在 beforeRouteLeave 中弹出一个带有选项的弹出窗口：“离开”或“留下”。如果用户点击“停留”，我就会停留在页面上。它似乎可以解决问题（它不会离开当前页面），但是如果我在浏览器上单击刷新，它会刷新上一页。或者，如果我说“停留”一次，然后再次单击后退按钮并说“离开”，我将返回两页。

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

谢谢。

Answer 1

目前尚未实现，但您可以使用路由器导航防护（路由更改挂钩）作为中间件来存储from和to参数对象并使用这些值编写逻辑。

只需确保调用 next() 函数，否则您将存储日志并且不会调用下一个路由。

检查此处的文档：https ://router.vuejs.org/guide/advanced/navigation-guards.html