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
This question is related to
javascript
webpack
vue.js
vuejs2
vue-router
Another solution is using vue-router-back-mixin
import BackMixin from `vue-router-back-mixin`
export default {
...
mixins: [BackMixin],
methods() {
goBack() {
this.backMixin_handleBack()
}
}
...
}
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>
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>
If you're using Vuex
you can use https://github.com/vuejs/vuex-router-sync
Just initialize it in your main file with:
import VuexRouterSync from 'vuex-router-sync';
VuexRouterSync.sync(store, router);
Each route change will update route
state object in Vuex
.
You can next create getter
to use the from
Object in route state or just use the state
(better is to use getters, but it's other story
https://vuex.vuejs.org/en/getters.html),
so in short it would be (inside components methods/values):
this.$store.state.route.from.fullPath
You can also just place it in <router-link>
component:
<router-link :to="{ path: $store.state.route.from.fullPath }">
Back
</router-link>
So when you use code above, link to previous path would be dynamically generated.
Use router.back()
directly to go back/route-back programmatic on vue-router.
Source: Stackoverflow.com