How to restore the state of a page when navigated from a certain page?
I have a nav bar with links [products, about, contact us, login]. Every link leads to a corresponding page. The /products page shows all the products (product cards) and also has a filter panel that helps to sort and show specific products.
When I click on a product card I go to a /product/[id] page where I can read more about a certain product. The page also has a "back to all products" button (actually a nuxt link).
What I need is to restore all filter values (i.e. state of the page) when I come back to /products page from the /product/[id] page. But if I came to the /products page via navbar link or from somewhere else, I want all the filters to have default values.
I don't like the idea of using query params to store the filter values in url. Also I failed with route middleware which tells the previous route and use pinia store values as filter values if the previous page was /product/[id].
In React I can pass state via routes but Vue/Nuxt seems to not have this feature. So how do I solve my problem?
4 Replies
Hey, I had a similar requirement from a listing page with filters in a Vue app.
In my case, I had to store the latest user filter parameters and persist them whenever the user gets back on the page.
I managed it by using the browser sessionStorage. Once I arrive on the listing page, I check if the sessionStorage has the key (an object containing every filter properties), then I loop on a default list of filter properties (to ensure the sessionStorage is using the latest structure) and I set in the page defaults the stored properties (per the last usage). I use a watcher to store in the sessionStorage any filter change.
If you only need to reset the filter parameters, you could simply set the filter parameters upon the page setup.
I directy used the browser sessionStorage but I am pretty sure VueUse has a composable that would ease the process.
How do you know where the user can from to that page? Because I need to use saved filter only if he came back from the /product/[id] page. In all other cases I want to use default filters
i think you can check it with router guard
Vue Router
The official Router for Vue.js