[Vuejs]-How to achieve "visited recently" using Vue?

You can use router.beforeEach((to, from, next) =>{}) and store the url in an array. You can read more details about navigation guards here.
https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards

Found this, it may help:
https://codesandbox.io/s/mutable-glade-qnrxm

It stores the visited routes.
It works like this:

<template>
  <div>
    <span v-for="crumb in crumbs" :key="crumb.index">
      <router-link :to="crumb.path">{{ crumb.name }}</router-link> |
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      crumbs: []
    };
  },
  watch: {
    $route(to) {
      if (this.crumbs.length > 3) {
        this.crumbs.shift();
      }
      this.crumbs.push({
        path: to.fullPath,
        name: to.name/*  */
      });
    }
  },
  mounted() {
    this.crumbs.push({
        path: this.$route.fullPath,
        name: this.$route.name
      });
  }
};
</script>

Here, it gets the route name and path on mount and pushes it to crumbs array.

 mounted() {
    this.crumbs.push({
        path: this.$route.fullPath,
        name: this.$route.name
      });
  }

Then it constantly watches and changes on route. On change, it shifts(removes the last and adds a new one) any router if there are more than 3. And then it assignes the name and path for every new router.

 watch: {
    $route(to) {
      if (this.crumbs.length > 3) {
        this.crumbs.shift();
      }
      this.crumbs.push({
        path: to.fullPath,
        name: to.name/*  */
      });
    }
  },

And at last, it loops the crumbs and displays it.

   <span v-for="crumb in crumbs" :key="crumb.index">
      <router-link :to="crumb.path">{{ crumb.name }}</router-link> |
    </span>