How can I go back/route-back on vue-router?
Solution 1
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>
Solution 2
Use $router.back()
directly to go back/route-back programmatic on vue-router. Or if in the template of the component use router.back()
.
Solution 3
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>
Solution 4
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.
Solution 5
Worked for me, short and practical. (Nuxt.js)
<a @click="$router.back()"></>
Related videos on Youtube
John107
Updated on March 17, 2022Comments
-
John107 about 2 years
Ok, to explain this simply:
I have 3x pages.
- Page 1 (Home)
- Page 2 (Menu)
- Page 3 (About)
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
-
yuriy636 over 6 years
-
Kartik Prasad over 6 years@yuriy636's is probably the best answer. Currently we have and outer component with the back button which uses string manipulation on the current url to go back to the last page in the route. We will probably change to the router.go method when we get the chance now though
-
John107 over 6 yearsOk thanks! It was staring me right in the face! I'm not really sure how to write this into my syntax though. Sorry! I'm new to this!
-
TonyGW over 5 yearsthis causes an infinite loop problem
-
PanPipes almost 5 yearsAnyone had any issue with this on IE11? E.g if I open a page via router-link, click my button it goes back, however if I open the same page via router-link the
router.go(-1)
clears my URL but nothing happens. -
Aravindh Gopi almost 5 yearsI want to go back to previous page if there is no id on load, it works but on page refresh .go(-1) goes 2 pages back rather than 1 page.
-
AshotN over 4 yearsNoob question, is it ok that we are using
a
tag here instead of router-link -
Steven Soroka over 4 years@Hego555 I believe router-link is a component that renders an
a
tag by default -
Titan about 4 yearsThis seems to ignore any url params that were in the previous url you are going back to
-
pishpish almost 4 years@TonyGW No it doesn't.
-
Enric A. almost 4 yearsIf you come from another website external to your app, you think that you can go back to a previous page of your app, but you would actually leave it for an external website.
-
aspirinemaga over 3 yearsit's
$router.back()
-
Armin over 3 years@aspirinemaga it's not if you are using it in the template of the component, if that is the case you pass it as to="router.back()"
-
Roel about 3 yearsRoute-links are usefull to generate links to certain routes because it automatically generated the correct urls when you change history mode on or off.
-
xlm over 2 yearsQuasar v2 no longer provides this directive and link is now broken. It does still intercept back with a different approach. See quasar.dev/quasar-plugins/dialog#cordova-capacitor-back-button and quasar.dev/quasar-cli/developing-capacitor-apps/…