on my single page app i have a page that the user have a select box and the data can changed according to the option the user selected.
when the data changed, i'm pushing a new state to the history
History.pushState({'id':params.id}, 'activity', '?activity');
the push works fine, the problem is when i hit 'back' the history detect that the previous state is the same ('activity') so the back doesn't work. but the data is different and i want the plugin to reload the same page but with the previous data.
I found the problem. This wasn't an issue about same state. I forgot to add preventDefault to the link that change the state.
Related
I have the case that I push some parameters to the nuxt router (https://router.vuejs.org/guide/essentials/navigation.html) whenever somebody visits a page without any parameters.
Example:
somebody visits: /program it will end up in /program/first-event?year=2018&month=6
(First the view filters the program for current events (therefore the parameters for this year and this month) and then from the filtered events it will set the first event as active post (also by pushing it to the router).
This is all wanted and good. BUT now I detected the following problem:
Somebody is visiting /aboutus and then navigates to /program, the router will automatically change to /program/url-of-event-post?year=2018&month=6.
Assuming the user wants to go back to /aboutus he clicks on the browser back button. This will bring him back to: /program which automatically adds the post and the parameters again (effectively moving one step forward again).
Means the user is caught in clicking endlessly on the back button.
My approach would be to try to register if a user clicks on the back button and if so, I would not add the parameters. But I don't know how to do this.
I thought the router would provide some 'from' property, but so far I did not find anything.
I would be very happy to hear some thoughts on this. Thank you heaps in advance.
You need use router.replace.
https://router.vuejs.org/guide/essentials/navigation.html#router-replace-location-oncomplete-onabort
I want to make a desktop app in vue-electron. I am new to both vue.js and electron.
I am having some problems while managing state.
When I click on login button https://cloudup.com/cFl9MTY6cnn I send data i.e sessionId and username to next screen https://cloudup.com/c76fmL8OGbF and on this screen I display these props https://cloudup.com/csahnc6Z04J using this code https://cloudup.com/cdR0F6Qyt-3 but as I go to the third screen https://cloudup.com/c0F1ztX8qu3 and then come back then this data disappears https://cloudup.com/cTFW32DxeRa
I am going back to second screen using router.go(-1) https://cloudup.com/cvpxk4GsIRx
The vue-router documentation https://router.vuejs.org/en/essentials/navigation.html says that
“router.push method pushes a new entry into the history stack, so when the user clicks the browser back button they will be taken to the previous URL.”
and router.go(n) "This method takes a single integer as parameter that indicates by how many steps to go forwards or go backwards in the history stack"
However in my case, lifecycle hooks are called again when I go back to history stack. So does that mean when we come to previous page that component is created again and not popped from stack. I actually don’t want to refresh / reload the page on back button.
You need to send the data to the third screen,too.
Instead of
<route-link to="third_screen"></router-link>
You need to write,
<router-link :to="{ path: 'third_screen', params: { session_id: this.session_id, userName:this.user_name}}">User</router-link>
And instead of router.go(-1) you need to send the data as params again to your second screen using router.push() method.
But I won't suggest the above method as you need to pass the same data as params to all routes.
You should also have a look at Vuex.
Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.
You should store your Session Id as cookie instead of passing it as props.
Update
Also have a look at <keep-alive></keep-alive>.
Reference
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.
How can I manipulate a Frame's history in a WinRT XAML app?
The user will start on my hub page, where they can select an existing project to go to its edit screen, or they can select "new project". "New project" will take them through a short wizard, then take them to the "edit project" screen.
It makes sense for the wizard pages to just be pages that I navigate to in the frame; that way the user can back out of the wizard if they change their mind. (It'll only be two pages, so "back" can take the place of "cancel".) But once the wizard is done and the changes are committed, there's no longer any reason for those wizard pages to be in the history; if the user clicks Back from the "edit project" page, I want them to go right back to the hub.
To illustrate, I want the flow to look something like this:
Frame history: Hub. User clicks "New Project".
Frame history: Hub -> Wizard Page 1. User clicks "Next".
Frame history: Hub -> Wizard Page 1 -> Wizard Page 2. User clicks "Finish".
Frame history: Hub -> Edit Project.
Frame doesn't seem to have any methods along the lines of "remove from history". The docs do have hints that there might be some way to override the history, because the docs for GoBack say "Navigates to the most recent item in back navigation history, if a Frame manages its own navigation history" (emphasis mine), but that's all it has to say on the topic -- there's no mention of how someone else can manage history for it. So I don't know whether that's useful or not.
How can I remove my wizard pages from my Frame's history once the user completes the wizard?
You can remove pages from the history by calling SetNavigationState(string navigationState) on the frame. Unfortunately the format of the serialized navigationState is "for internal use only", so just changing the string might break your code in future versions.
I only can think of a future proof method to completely clear the navigation stack:
At program startup save the empty navigation state by calling GetNavigationState.
BEFORE calling Navigate for your Edit Project page, call SetNavigationState with the empty navigation state.
Your Edit Project page will now be the first page on the stack.
Starting with Windows 8.1, you have access to the BackStack property of a Frame. You can easily remove some content or clear the whole back stack.
Here is what I'm using the clear the back stack :
var rootFrame = (Window.Current.Content as Frame);
rootFrame.Navigate(typeof(MyPage));
rootFrame.BackStack.Clear();
its a solution for me :
while (ContentFrame.BackStack.Count > 1)
{
ContentFrame.BackStack.Remove(ContentFrame.BackStack.ElementAt(ContentFrame.BackStack.Count-1));
}
I am using AdvancedTicketWorkflowPlugin 0.10dev and I have created my own ticket state (claimed_fixed). Everything seems to work, but changes about claiming fixed are not visible in the timeline. I checked timeline section in trac.ini, but haven't found and place I need to change. What I have to do, to make it visible?
Try setting
[timeline]
ticket_show_details = true
in your trac.ini, then on the timeline page click the "Ticket updates" checkbox and the "Update" button.