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
Related
By default, nuxt adds a route for each page in pages.
I want to make when going to the page e.g. project.local/id/ec29cjsa5fas512ik, the user goes to a page template and the Vue receives this ec29cjsa5fas512ik id from the url so it can make proper API calls later.
You can make a dynamic page in Nuxt2 with the following file, eg.
/pages/details/_id.vue
then you'll have a path like /details/:id.
More info can be found here: https://nuxtjs.org/docs/features/file-system-routing#dynamic-routes
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();
}
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.
I have a SPA built in Vue.js that lets the user input several values to create something like a recipe. All these values are stored in Vuex state. I would like to be able to create a URL using the state values that the user entered so that another user can load the app with those values already entered. Essentially I want to allow users to share the recipes they created in my app by sharing a URL.
I'm imagining a "share" button which will copy the created URL to the user's clipboard which they can then post on social media or whatever. Then when someone visits the link, they will go to my app and the vuex state values will automatically be updated to the parameter values found in the URL.
What is the best way to achieve this functionality? Is this something that is possible with vue-router?
Use the $route.query property provided by vue-router.
Pass in a parameters through your URL like http://example.com/#/?amount=10 and access them with this.$route.query.amount.
Update your vuex store in the main component's mounted() method.
Official Documentation for the Route object
If I understand you correctly the vue-router should do exactly that.
have a look at the documentation where they send the user id. You can pass as many parameters as you like.
https://router.vuejs.org/en/essentials/dynamic-matching.html
note: you may consider rebuilding application paths using the router.