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.
Related
I have a blog (website.com), with a page for posts (website.com/post?id=...).
What I want, is whenever I go to post page, to trigger JS's alert.
This is the code for post page:
export default {
name: 'PagePost',
data() {
alert(1)
...
The problem is that if I go post page its trigger an alert, but if I go to another post it doesn't alert again, (it does only when I refresh the page).
From what I cloud understand, Vue save the page in the DOM, so it doesn't run this again (only when refreshing the page).
How can I re-trigger alert when the user go back and forth between pages?
P.S. what I'm trying to accomplish is when a user go between pages, to reload the post and the comments (without needing to refresh the page), but I tried to make the problem easier with trigger.
P.S. #2 I prefer to run the alert in the mounted() function, because it's loading faster than data().
It looks like you're using vue router. Take a look at beforeEnter method. You need define it in post route and trigger alert there.
I am using Vue 2.x.
There is a post page. When I click on a button in the post page, I go to the edit page. And when I click submit on the edit page, I used this.$route.replace(link_to_post_page) in order to remove the edit page from the history stack, and push the post page.
So now I have two of the same routes(the post page) in my history stack.
The problem is, when I click on the browser's back button, I go to the same page, that is, the post page. This is a very unnatural flow of pages for the user, and I want to fix it.
I have researched on ways to fix this for 6 hours, however I failed to find the solution.
My first try was to use Navigation Guards. But Navigation Guards only work when the route changes. In my case, the route does not change.
I also tried using window.history.onPopState event listener but failed with that too, because I could not manipulate the route when using window.history.onPopState.
I would really appreciate your help. Thanks.
P.S.
The most similar question on Stack Overflow is this vue-router: skip page when using browser back button but it does not answer my question at all. I have checked other questions but they also don't answer my question.
Why not going back in the history instead of pushing a new /edit route?
Steps
Routes stack
/post
['post']
-> Click on "edit" button
/edit
['post', 'edit']
-> this.$router.back()
/post
['post', 'edit']
The drawback of this is that the user still can manually go forward to the /edit page.
But if they go on another page, it will override the next steps (the /edit route above on the stack)
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 want to remove hash(#) from url in vuejs using vue-router in Laravel. So I used mode:'history' or history: true
const router = new VueRouter({
routes: routes,
mode: 'history'
//history: true
});
and it works perfectly but the problem is that each time request is changed for example from example.com/home to example.com/user the request will be sent to server and all the page will be refreshed however I want to only change the content between head and foot of the page. So when I mark an string in the top menu it will not unmarked when going to another url but now it sends the server and the page loads completely when not using mode:'hash'.
How can I remove hash without sending another request to server in order not to load the page again completely and load only body part?
Thanks
I don't have created links yet I just change it manually in url. If you are saying that doesn't work manually so why it works with mode: 'hash'? So if router-link works just like that I should use it I think. I didn't know about that
ok… I get it
if you are using history mode, you have to use <route-link> because, as noted above,
In HTML5 history mode, router-link will intercept the click event so that the browser doesn't try to reload the page.
When you enter a new url, the browser loads that page, that's the browser's way of operating and you can't get around that. The framework however handler it differently, by updating the url and the content, but not actually redirecting(reloading)
The reason why this works with the hashbang, is that the broser treats everything after the # character as in-page navigation. Meaning it doesn't consider it as a redirect. The hash character was traditionally used in HTML to allow navigate to items within a page.
For example, about-us.html#contact redirects a user to the about page and scrolls to the contact form.
The modern js frameworks use the hash to hack this navigation by not redirecting, and using the content after the hash to pass routes.
For example, if you have a route such as localhost:8080/#/about-us, the localhost:8080/# part is the same as localhost:8080/index.html# so changing anything after the # character keeps the browser on the same page, and the javascript (vue router) handles any changes that are needed.
Hope this clears it up. Fwiw, I haven't used history mode on any of my projects.