There are situations where keeping a reference to the last route a user visited can come in handy. For example, let’s say we’re working with a multi-step form and the user proceeds from one step to the next. It would be ideal to have the route of that previous step in hand so we know where the user left off, in the event that they navigate away and come back later to complete the form later.
We’re going to cover how to store the last known route and then fetch it when we need it. We’ll be working in Vue in this example and putvue-routerto use for routing andlocalStorageto keep the information about last visited route.
Each route needs to be assigned a name property, so let’s add that to our router.js file:
Next, let’s go over the requirements
We know the first requirement is to store the last visited route inlocalStorage. And, secondly, we need to be able to retrieve it. But what conditions should the route be fetched and applied? That gives us two additional requirements.
the user enters the main route (/home), navigates away from it, then wants to return to it.
the user has been inactive for a specific time period, the session expires, and we want to return the user to the last screen they were on after restarting the session.
These four requirements are what we need to meet in order to proceed with the redirection.
Now let’s jump into the code.
Requirement 1: Save the last route name in localStorage
We want to keep the reference to our last visited route inlocalStorage. For example, if a user is at/checkoutand then leaves the site, we want to save that so the purchase can be completed later.
To do that, we want to save the route name when the user enters any new route. We’ll use anavigation guardcalledafterEachthat’s fired each time the route transition is finished. It provides atoobject which is the targetRoute Object. In that hook, we can extract the name of that route and save it inlocalStorageusing asetItemmethod.
Requirement 2: Fetch the last route name from localStorage and redirect
Now that the name of the last route is saved, we need to be able to fetch it and trigger a redirect to it when it’s needed. We want to check if we should redirect before we enter a new route, so we will use another navigation guard calledbeforeEach. This guard receives three arguments:
to: the target route object
from: the current route navigated from
next: the function that must be called in the guard to resolve the hook
In that guard, we read the name of the last visited route by using alocalStorage.getItem()method. Then, we determine if the user should be redirected. At this point, we check that the target route (to) is our main route (/home) and if we do indeed have a last route inlocalStorage.
If those conditions are met, we fire thenextmethod that contains the name of the last visited route. That, in turn, will trigger a redirect to that route.
If any condition fails, then we’ll firenextwithout any arguments. That will move the user on to the next hook in the pipeline and proceed with ordinary routing without redirection.
That covers two out of four requirements! Let’s proceed with requirement number three.
Requirement 3: The first visit condition
Now, we need to check if the user is visiting the main route for the first time (coming from a different source) or is navigating there from another route within the application. We can do that by adding a flag that is set to true when the Router is created and set it to false after first transition is finished.
OK, there is one more requirement we need to meet: we want to redirect the user to the last known route if the user has been inactive for longer that a specific period of time.
Requirement 4: The activity time condition
Again, we will uselocalStorageto keep the information about user’s last visited route.
In thebeforeEachguard, we will get the route fromlocalStorageand check if the time passed from that moment is within our threshold (defined byhasBeenActiveRecently). Then, in ourshouldRedirect, we’ll determine whether a route redirect should happen or not.
We also need to save that information, which we will do in theafterEachguard.
We met the requirements!
That’s it! We covered all four of requirements, namely:
We store the last visited route inlocalStorage
We have a method to retrieve the last visited route fromlocalStorage
We redirect a user back to the main route if they’re coming into the application on an initial visit
We provide the user with a redirect to the last known route within a certain time period
Of course, we can extend this further by adding more complexity to the app and new conditions to theshouldRedirectvariable, but this gives us more than we need to have an understanding of how to keep the last visited route persistent and retrieve it when it’s needed.