CODEWITHSUNDEEP
javascriptwebpackvue.jsvuejs2vue-router
John107
John107

Reputation: 2287

How can I go back/route-back on vue-router?

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

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

Upvotes: 134

Views: 285111

Answers (8)

Wasi Sadman
Wasi Sadman

Reputation: 1482

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>

Upvotes: 1

Mehmet M&#252;cahit &#199;ağlıyan
Mehmet M&#252;cahit &#199;ağlıyan

Reputation: 151

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

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

Upvotes: 15

Jos&#233; Fernando Davila
Jos&#233; Fernando Davila

Reputation: 3029

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>

Upvotes: 301

Tony O&#39;Hagan
Tony O&#39;Hagan

Reputation: 22682

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!

Upvotes: 3

Abhishek Singh
Abhishek Singh

Reputation: 597

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

Upvotes: 44

yeikiu
yeikiu

Reputation: 357

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>

Upvotes: 34

ittus
ittus

Reputation: 22393

Another solution is using vue-router-back-mixin

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

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

Upvotes: -5

ojczeo
ojczeo

Reputation: 85

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.

Upvotes: 6

Related Questions