Ok, to explain this simply:
I have 3x pages.
Page 1 has a-
<router-link to="/menu">
button that when clicked routes to "/menu".
For now, Page 2 (Menu) has a
<router-link to="/">
button and when this button is clicked it reverts to the previous location "/" Page 1 (Home).
But I don't want to create a component for router for each page to 'go back' to the previous page (as if I had 100 pages this could be a lot of work routing back). Is there a way to do this with vue-router? similar to window.history.back()
Curious to see if there is a way to do this as I can't find it in the docs.
Thanks in advance! John
You can use Programmatic Navigation. In order to go back, you use this:
router.go(n)
Where n can be positive or negative (to go back). This is the same as history.back().So you can have your element like this:
<a @click="$router.go(-1)">back</a>
Use $router.back() directly to go back/route-back programmatic on vue-router. Or if in the template of the component use router.back().
This works like a clock for me:
methods: {
hasHistory () { return window.history.length > 2 }
}
Then, in the template:
<button
type="button"
@click="hasHistory()
? $router.go(-1)
: $router.push('/')" class="my-5 btn btn-outline-success">«
Back
</button>