How can I go back/route-back on vue-router?
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>
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.
This answer to this question becomes much trickier if you're coding a mobile app as you now need an integrated solution that accommodates back history from either your UI back button OR the "back" button provided by the mobile device!
Frameworks like Ionic and Quasar can intercept mobile device back button events. Quasar handles these events for you and adapts behaviour for desktop and mobile platform builds so a for example a Cordova/Capacitor mobile app build will ensure that a "back" action can intelligently either close a dialog or go back a page or even close the app!
-
Quasar Back event handler and
v-go-back
directive- https://quasar.dev/vue-directives/go-back
-
Ionic - Back button and Hardware back button
- https://ionicframework.com/docs/api/back-button
- https://ionicframework.com/docs/developing/hardware-back-button