135

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()

I'm curious to see if there is a way to do this as I can't find it in the docs.

Improve this question
3
  • 3
    router.go(n) | Programmatic Navigation | vue-router Commented Jan 4, 2018 at 23:08
  • 1
    @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 Commented Jan 4, 2018 at 23:11
  • 1
    Ok 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! Commented Jan 4, 2018 at 23:15

8 Answers 8

Reset to default
303

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>
Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

Anyone 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.
I 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.
Noob question, is it ok that we are using a tag here instead of router-link
@Hego555 I believe router-link is a component that renders an a tag by default
This seems to ignore any url params that were in the previous url you are going back to
|
45

Use $router.back() directly to go back/route-back programmatic on vue-router. Or if in the template of the component use router.back().

Improve this answer

2 Comments

it's $router.back()
@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()"
34

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">&laquo; 
  Back
</button>
Improve this answer

1 Comment

If 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.
16

Worked for me, short and practical. (Nuxt.js)

<a @click="$router.back()"></>
Improve this answer

Comments

6

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.

Improve this answer

2 Comments

this causes an infinite loop problem
@TonyGW No it doesn't.
3

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!

Improve this answer

1 Comment

Quasar 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/…
1

This might help someone

<router-link class="inner-back d-inline-block" to="">
    <i class="fas fa-arrow-left" @click="$router.go(-1)"></i>
</router-link>
Improve this answer

Comments

-5

Another solution is using vue-router-back-mixin

import BackMixin from `vue-router-back-mixin`

export default {
  ...
  mixins: [BackMixin],
  methods() {
    goBack() {
      this.backMixin_handleBack()
    }
  }
  ...
}
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.