I would like to know how to store in LocalStorage a previous route when switching to another route.
I hope to be able to navigate between several routes and not lose the changes made in the previous route.
Also when closing the browser, keep that last route.
You can save the last route, but saving the previous state is a lot harder.
You can save the previous route path or name using a guard for afterEach.
Storing the state is a lot harder and you should probably use something similar to vuex and use this.$router.go(-1) yo navigate back.
Related
I have below two vuejs page. I created filters in my list page like search by user name and email. The filter is working fine, but the issue is when I type something in my search box and search it's working but after that when clicking on the edit user link and after that comes back to the list page the filter is removed and it shows me all data. My question is how can I remember the search I just need suggestions on how can I achieve that.
localstorage or vuex possible solution for that?
1. List of users
2. Edit User
The solution is to save the filter in a vuex state that way it doesnt change when u go back as long as you're still in the same tab and didnt close it.
If you don't refresh the page and navigate between the route's components, it's best to use Vuex, and on the other hand, if you want the same search results to be stored and retrieved even after refreshing the page, use the localStorage.
Furthermore, Vuex would be good to store large lists of data instead of localStorage.
I am using $router.go(-1) to go back to the previous page but as I am using this on a home page I want know how to check if there is a previous route.
Vue router navigation is tracked by the native browser history, use window.history.length.
If it is 0 there is nothing to go back to.
However; Users arriving from another website have a value higher than 0.
To overcome this issue, upon your App mounting; store the initial value of window.history.length globally.
Capture the initial value using a mount hook such as: beforeMount or mounted.
Store the history length value using $root as a global state:
this.$root.historyCount = structuredclone(window.history.length)
Alternatively use VueX if you are already leveraging the store bus plugin.
structuredclone or lodash.clone ensures you have a copy of the value rather than a reference to it, a reference would be bad; as this means you would always have the latest history count rather then the original entry point value.
https://developer.mozilla.org/en-US/docs/Web/API/structuredClone
https://lodash.com/docs/4.17.15#clone
When checking history state on a call to action, subtract $root.historyCount from window.history.length to see if zeroes out.
This way you will be only counting the history that occurs in your own app.
You may also want to consider that perhaps if your current route ($router.currentRoute) is the home page there is also no way of going back beyond that page but obviously will prevent back navigation to prior home revisits.
As window.history.length will always return 1.
You can use
if (window.history.state.back === null) {
router.push({path="/"}); //or whichever path you required
} else {
router.back();
}
Problem
I have an electron app with vue. As the user has no UI to navigate back I created a back button.
This works so far so good. But being logged in and on the index page the user shouldn't be able to navigate back any more. As he would navigate back to the login but would get redirected back to the index page. And this wouldn't make much sense. For that I want to disable the back button.
Tested
I have added a global variable to get the previous route in my components. But somehow this gets messed up when clicking twice or more often. It looks like that:
router.beforeEach((to, from, next) => {
Vue.prototype.$prevRoute = from;
return next();
});
I think it is because when navigating back the previous route changed to the route you were coming from. And not the history anymore.
There seems to be a github feature request to add the referrer but it was opened in 2016 and I am not sure if it will be again the same problem as above.
https://github.com/vuejs/vue-router/issues/883
In-component guards
I also tested beforeRouteLeave and beforeRouteUpdate but as the back-button is in my layout these methods are not called.
Application-design
I am having a login-page with authentication. After that the user-information is stored in the local-storage and I am using a middleware concept for redirecting (https://markus.oberlehner.net/blog/implementing-a-simple-middleware-with-vue-router/)
To go back I am using this method: this.$router.back()
Expectation
My expected result would be to be able to check in the back-button-component if the back-route will be the login or if there the going-back-stack has only one value left. In that case I would disable my back-button.
I have a use case where I redirect the user to the same page but with a different route (/prices/usd, prices/yen, prices/eur etc...). I am using firestore and I am able to get data from firestore when the route is first visited but then onwards it doesn't fetch the fresh data even though route change if the page is same.
Use beforeRouteUpdate to bind to a different ref/document/collection
I try to mimic how Pinterest (and a lot of other popular sites) achieved this.
When a user clicks a modal, the modal pops up, the address bar url changes, a new history entry is added, but the page doesn't reload. And when the user closes the modal, everything reverts to previous state with a new history is also added.
Vue-Router offers router.push, router.replace and router.go, but they don't achieve what I want. router.push would navigate to that url, but I am opening a modal which has an URL associated with it, not going to that url. router.replace replaces the current history entry, not adding new one.
What is the standard way to do this?
Use Vue Router (google it) for this. Just keep in mind that stuff like this generally means a lot of work for very little gain.
With Vue Router you can set your app up so that page.com/book/Test directs you to page.com/book with the variable Test set.
I recommend setting your site up as a single file project using Webpack and the Vue plugin, and using that eith Vue router. Then you can get the functionality you want.