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)
Related
I am using one of the woodmart built-in themes and have 2 issues (I think they are so easy to do but couldn’t find any solution on internet which works well) one is about register page link on the sidebar login are and the logout confirmation.
When you go to our website which is http://www.fitovision.com and click on Login/Register button on the right top of the page a sidebar widget comes out. I have changed the Create An Account link to my custom page but because I did this on the integration page of woocommerce to the theme, when I get any update it goes back. So looking for a hook or function codes to add to the child theme functions page to keep it there forever even if I get any update. Could you please tell me how to do that? I have asked this to the theme editors support page but they said it belongs to woocommerce so asked me to open a ticket here.
Second one is when you login to the page we have an dropdown menu on the top on the place of Login/Register link. And there is Log Out link on the at dropdown menu. When I click it it goes to My Account page and when I click there again it logs out. I have read and applied too many ways to bypass the logout confirmation on first click but none of them worked as I realised that they were all old dated posts. So I thought after some time and your updates it should be forced by the wocoommerce to do it. But my clients definitely do not want it. Is there again anything else I can do for that to log out on the first click? And keep it there with adding to the child theme functions page?
Thank you for replies instead.
Emre GOKTEPE
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 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.
So, I ran into a problem: I have 2 (or more) consecutive pages, which the user can click through. At the bottom of each page there's a "Back" button (with Javascript's history.go(-1);), so that the user is able to go back to the previous view.
Now my problem is: When the user is on page 3 and clicks on the button, he goes back to page 2 (until here everything's fine), but when he's back on page 2 and clicks on the back button on that page, instead of going even further back to page 1, he gets sent back (or forward?) to page 3.
Is there a solution to this problem, I tried Google, but couldn't find anything.
Thanks in advance! :)
Your problem is that the Javascript is behaving exactly as it should in returning the browser to the previous page. Could you not handle your navigation between pages more explicitly? Replacing the history.go(-1) with a link to the actual script\page?
Use window.location to send the user back to previous page instead of history.go(-1). If the user lands on the second page in your flow, the back button will be useless.
I have a DropDownChoice with a PropertyModel in my page and I have some other actions which take me to different pages. Now when I click on the Back Arrow on my browser, I come to my page which has the DropDownChoice with the previously selected choice. I understand PropertyModel holds the value for me. But how can I get rid of it when I hit Back button and why is the onBeforeRender(both on the class as well the Component) not working when I hit the Back button. Please comment if my explanation is not clear enough. I am using Wicket 1.4.8
onBeforeRender doesn't work because it's never called. When you navigating using "Back" button, no new request are sended to your server, hence page rendering never occurs. The only way to solve your problem - is to use javascript.