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)
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 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.
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!
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 question with vue router. I'm working on a custom library of vue that most of the code has already been created before me. My question has to do with trying to get a page to use a back button on the page that works on a registration process flow (it works on all other pages, besides this one particular page).
I'm not quite sure whats exactly going on with why it's acting a certain way with the '#', which I assume is going to be the problem:
The flow of the app should go like this:
http://localhost:8080/#/events, hitting the 'Continue' button goes to the next page (product page)
http://localhost:8080/#/product, hitting the 'Continue' button goes to the next page (upgrade page)
http://localhost:8080/upgrade#/, hitting the 'Continue' button goes to the next page (payment page)
Each page has a back button on the page to go back to the previous one. Going from '/upgrade#/' and hitting the back button, the app gives me a link to a blank page with this URL:
http://localhost:8080/upgrade#/product
I'm not sure from when we are on the page of:
http://localhost:8080/#/product
and hit the Continue button, why the '#' moves to after '/upgrade'.
This is our method we are using to change pages:
changeRoute() {
this.$router.push("/product");
}
What you want is to put vue-router mode to history.
const router = new VueRouter({
mode: 'history',
routes: [...]
})
The default mode for vue-router is hash mode, which is why you are seeing this behaviour.