60

I want to get previous page link or url in vue-router. Like a this. How to do it?

const link = this.$router.getPrevLink(); // function is not exist?
this.$router.push(link);

Near concept is this.$router.go(-1).

this.$router.go(-1);

6 Answers 6

100

All of vue-router's navigation guards receive the previous route as a from argument ..

Every guard function receives three arguments:

  • to: Route: the target Route Object being navigated to.

  • from: Route: the current route being navigated away from.

  • next: Function: this function must be called to resolve the hook. The action depends on the arguments provided to next

As an example you could use beforeRouteEnter, an in-component navigation guard, to get the previous route and store it in your data ..

...
data() {
 return {
   ...
   prevRoute: null
 }
},
beforeRouteEnter(to, from, next) {
  next(vm => {
    vm.prevRoute = from
  })
},
...

Then you can use this.prevRoute.path to get the previous URL.

8
  • 25
    Note: That you can only use beforeRouteEnter in the component that the route is defined for and not a child component which is not defined in the router. Aug 1, 2019 at 12:00
  • @hitautodestruct Then adding it as a global mixin wouldn't be a good idea since components that don't have a route would mess up ?!
    – lbris
    Mar 12, 2020 at 11:03
  • 4
    @Ibris The OP asked for a way to get the URL of the previous page (I don't know the details of their use case). If you simply want to go to the previous page then this.$router.go(-1) is the way to go ;) Mar 12, 2020 at 20:10
  • 6
    Say I directly navigate to the SPA by copying and pasting the link in the browser, this.$router.go(-1) is not suitable in this case. May 18, 2020 at 9:45
  • 1
    @Tenarius Seems that this is the expected behavior because next callbacks are invoked after a nextTick. So you can't access properties set by the callback in created/mounted because these hooks come earlier. See this issue. Jul 14, 2020 at 10:25
23

For Vue 3 with Vue Router 4, my solution was:

this.$router.options.history.state.back

The final code:

export default defineComponent({
  name: 'Error404',
  data () {
    return {
      lastPath: null
    }
  },
  created () {
    this.lastPath = this.$router.options.history.state.back
  },
  computed: {
    prevRoutePatch () {
      return this.lastPath ? this.lastPath : '/dashboard'
    }
  }
})

Regards.

1
  • 2
    For Vuejs 3, First import { useRouter } from "vue-router"; Second invoke the router instance const router = useRouter(); then for example: router.options.history.state.back works like cake!
    – Sobhani
    Mar 22, 2022 at 12:39
5

This routing solution will fall back to a static url if a previous url does not exist.

<template>
    <div>
        <router-link :to="prevRoutePath">Previous Page</router-link>
        <router-link to="/">Home Page</router-link>
    </div>
</template>

<script>
export default {
    beforeRouteEnter(to, from, next) {
        next(vm => {
            vm.prevRoute = from;
        });
    },
    computed: {
        prevRoutePath() {return this.prevRoute ? this.prevRoute.path : '/'},
    }
}
</script>
4

Though this answer is great, the received route wouldn't always be the route before in history in case of popstate navigations (aka when the user clicks the back button).

So if you use Vuex here's a code snippet that respects this behavior:

const store = new Vuex.Store({
  state: {
    routerHistory: [],
  },
});

const router = new VueRouter({
  mode: 'history',
  scrollBehavior(to, from, savedPosition) {
    const fromHistory = Boolean(savedPosition);

    if (fromHistory && store.state.routerHistory.length > 0) {
      store.state.routerHistory.splice(-1, 1);
    } else {
      store.state.routerHistory.push(from);
    }

    return savedPosition || { x: 0, y: 0 };
  },
});

Once implemented, you can define a getter for the previous route inside your store:

const store = new Vuex.Store({
  // ...
  getters: {
    previousRoute: (state) => {
      const historyLen = state.routerHistory.length;
      if (historyLen == 0) return null;
      return state.routerHistory[historyLen - 1];
    },
  },
});

This code uses the scrollBehavior hook, which only receives the savedPosition argument if it was a popstate navigation. Thanks to Vuex we can then store all the routes in an array (over multiple pages).

0

For Vue 2.6 that works for me:

In-App.vue component when you initialize the VueRouter you can get from and to details as below:

export const globalState = Vue.observable({ from: {}, to: {} });
const router = new VueRouter({
    base: '/',
    routes: routes,
    mode: 'history',
    scrollBehavior(to, from, savedPosition) {
        Vue.set(globalState, 'from', from);
        Vue.set(globalState, 'to', to);
        return { x: 0, y: 0 };
    },
});

routes are ur routes and each time u navigate to a different URL you will have all from and to routes details. Then u can import the globalState object and use it like that

     import { globalState } from './app';
     goBack() {
        const lastPath = globalState.from?.fullPath;
        const currentPath = globalState.to?.fullPath;
        if (lastPath && currentPath !== lastPath) 
           {
              this.$router.push(lastPath);
           } else {
              this.$router.push('another-path');
            }
        }
-1

To yank it right out of the $router object, use this in your computed or methods:

lastRouteName: function() {
  let returnVal = '';

  const routerStack = this.$router.history.stack;
  const idx = this.$router.history.index;

  if (idx > 0) {
    returnVal = routerStack[idx - 1].name;
  }

  return returnVal;
}

That'll return the route name, but you can also return the .path or whatever other property if you like.

To inspect the history object, do console.log(this.$router.history);

2
  • 1
    Property 'history' does not exist on type 'VueRouter'
    – Jango
    Dec 18, 2021 at 13:07
  • Most likely this only works for VueRouter 4. Oct 12, 2022 at 16:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.