How do I see the navigation history in vue-router?

Question

I have a vue.js application and I'd like to see the navigation history in vue-router. I have a beforeRouteLeave hook in my component and I put a breakpoint in there. It hits the breakpoint, and I type this.$router in the console. It outputs the $router object but I don't see an actual stack of urls representing the history of my navigation through the site.

This is what I see:

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

(I could expand this but I think that would be too big.)

Where is the actual navigation stack?

If you want to know why I need to see the navigation stack, it's because, when I click the back button on the browser, I suspect that the navigation stack is being popped even though my beforeRouteLeave hook is called and I don't call next(). I bring up a popup in beforeRouteLeave with the options: "leave" or "stay". If the user clicks "stay", I stay on the page. It seems to do the trick (it doesn't navigate away from the current page), but then if I click refresh on the browser, it refreshes with the previous page. Or if I say "stay" once, then click the back button again and say "leave", I go two pages back.

So I want to see what's going on with the navigation stack. Is it being popped regardless of whether next() is called in beforeRouteLeave, at least when I click the back button? Or is something else going on.

Thanks.

Answer 1

It's not currently implemented, though you can use router navigation guards (route change hooks) as a middleware to store the from and to argument objects and write your logic with these values.

Just make sure you call the next() function, otherwise you'll be storing logs and not calling the next route.

Check the docs here: https://router.vuejs.org/guide/advanced/navigation-guards.html

Answer 2

This doesn't directly answer your question about how to see the navigation history in vue-router, but I came across your question with a similar problem that you mentioned as well:

When I click the back button on the browser, I suspect that the navigation stack is being popped even though my beforeRouteLeave hook is called and I don't call next()

It seems the solution to this problem is to explicitly call next(false) according to the official vue-router documentation.

https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards

next(false): abort the current navigation. If the browser URL was changed (either manually by the user or via back button), it will be reset to that of the from route.

I've tested on vue 2.x and it solves the problem for me in cases where it was navigating to another route: e.g. /a -> /b but not in cases where it's navigating to the same route different param: e.g. /page/1 -> /page/2