I have a vue page that displays a set of components in a certain order. Loading the page with the order will display those elements in order, for example:
https://mysite/dashboard/e3e1e2
will display components in order of 3,1,2 and
https://mysite/dashboard/e1e2e3
will display components in order of 1,2,3 etc.
If I change the order of the components in-page, for example by dragging them in a different order, I want to update my url so that it reflects the new order. There are two ways I can accomplish this:
this.$router.push({ path: '/dashboard/e3e2e1' }) // or this.$router.push({ name: 'dashboard', params: { elOrder: 'e3e2e1' } })
or
history.pushState({}, null, '/dashboard/e3e2e1'
For updating the URL, both work equally well. But here is the problem:
If I use this.$router.push my components are reloaded with all their data, when the only thing that has changed about them is their position on the page. However back and forward (history) works as expected.
If I use the history.pushState method, I can share that URL and it will load in the correct order for others, and the URL reflects the order on the page while viewing it, but forward navigation is broken (when I go back in history, the forward button will always be greyed out)
What I would like to accomplish is have a working history navigation without unnecessarily reloading all the components whose data has not changed in any way.
Related
I have a website that has a search bar. When the user searches and hits enter, I need the page to reload with the new query params in the URL.
The problem is, if the user is already on that page, even though the query params are updating, the page does not reload. I have to physically hit refresh to see the new results.
I already know that I can pass in a key to router-view to fix this issue but I need an alternative as no where in my project is router-view even used.
What is another option to simply reload the page?
redirect({ lat, lng }) {
router.push({ name: 'test-route', query: { lat, lng }})
}
You can do something like this
this.$router.replace({
...this.$router.currentRoute,
query: your new list of query parameters, can be an empty object
});
Keep in mind that if the new query object has the same key/value pairs as the current one - VueRouter will not perform a navigation.
However, if there is not even a single <router-view> in your application - you won't be able to change routes because Vue does not know where to render the route.
I have a form with a dropdown list of country options like so:
When the user selects an option, the form will load some data from an API so the user can make changes. However, some parts of the form have some deeply nested components where the user can edit additional data on a separate page. The problem is that when the user changes navigation and then clicks the back button on the browser, the drop down list is 'reset' and he has to select again the country that he was editing.
Can someone suggest a way to handle this issue so that if user clicks the back button on his browser (or the page has a "back to results link"), he will go back to the form and it will already be pre-selected with his option?
Should I be handling this via $route.query, localstorage, vuex? I would prefer not to use Vuex but I guess I can if needed.
Is $router query all i need here? I can capture the country's id and run the API call again on navigation back to the drop down selection page?
Example data from API:
{
id: 1,
name: 'Afghanistan'
}
When user selects a country from menu, I run an API get request like so:
async setSelectedCountryObj(value) {
if (value) {
const response = await APIService.tempISOCountryById(value.code)
....snip...
it's possible to handle with router, but that not a good way, you should go with vuex, that best way, just create store, and dispatch after select value, and always get value when come on that component, that essay not that much difficult, let me know if you need but i know you can.
I'm working on a Vue project, where I have a navbar component. On mobile, this component shows a title for the page. I need to set this title on a page by page basis, but haven't been able to find a reliable way to do it.
I've seen examples suggesting adding meta: { title: 'My Page' } to each of the routes for the app, then checking the matched route and applying the title. This doesn't work for me as on some pages the title will rely on data fetched from displayed page (e.g. /posts/:id would want the title to be the title of the post, which isn't available to the router).
Another option I considered is emitting an event, which sets the title. This would work, but would have to be reflected up multiple levels, and would require every page to have a title otherwise the previous title would remain after navigation.
Similar to the above, it could be implemented via Vuex to avoid having to pass the event up the chain, but would have the same issue of the previous title remaining after navigation. I could of course clear the value on route change, but this could introduce a race condition as the API request is cached, so revisiting a cached page could result in no title.
Ideally I want a mix between using meta values, and values dependent on the result of the API call. What is the best way to achieve this?
I am using vue router and have already set mode to history. My app works fine except that when i try to use hash (#) in url in order to scroll the page to an element in the same page (eg: #information) the page reloads (meaning it re-requests data from my backend). I think the router thinks the page has changed and tries to load that page.
EDIT: The page does not really reload. It re-fetches data from by backend. I understand this as a reload though.
I tried googling but all i get is how to use history mode. Maybe i am searching the wrong way.
Any clues on how to fix this?
Here is my route:
{
path: '/p/:idormpn/:slug',
name: 'Productpage',
component: Productpage
}
Here is an example of what is happening:
https://www.e-checkout.gr/p/63529/dermatina-anatomika-pedila-mavro
Thanks!
Hi I am trying to push a page but it appears any push to a page I'm currently on doesn't reload the page like /about to /about doesn't do anything(which is fine). If I push a page that is different than the one I'm on it will direct me to the page and reload(expected). The problem is I am using a param in the url that affects what is shown like /profile/jordan1 and when I push /profile/jordan2 because its the same base route and only parameter change it does show /profile/jordan2 in the URL but does not actually reload the page so the page doesn't repopulate with jordan2 data and stays unchanged so I can reload the browser myself and it will work but I want the button click to do that like it should do
Im using Vuetify and have tried just using :to in the button component as well as #click and creating a method with
:to="'/profile/' + this.$store.state.userAuthData.username"
this.$router.push({ name: 'Profile', params: { username: this.$store.state.userAuthData.username } })
both work Identical and have same issue.(the :to one I'm actually using a computed property with that route but for simplicity just wrote it like this)