vue-router - How to get previous page url?

Question

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 ex         


        

Answer 1

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.

Answer 2

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