Clear forward history using router

General
1

Is it possible to clear forward history using router? not using NavigateTo?
I read the documentation on Navigation Order

For example, if the user visits pages A then B then C, the stack, from front to back is C* B A where C* is the active page. The pages B and A are behind the active one. If the user goes back the current page changes, C B* A, now C is in front of the active page and A is behind it.

What I want to do is when I go back from C to B, I want the very front page (C) removed from the stack/history. Is it possible to do so?

2

Fuse optimises navigation so that it keeps the page in memory, in case user decides to go to it once again; if it’s instantiated, far less resources are needed to restore it.

You can look into these two properties of a Navigator to customise its behaviour: Navigator.Remove and Navigator.Reuse.

In addition to that, you might have some success using router.modify JS method, or RouterModify UX class.

The more interesting question probably is why are you asking this in the first place? What is the use case that makes you want to remove a recently spawned page?

3

Hi Uldis! Thanks for the fast reply.

I am still a beginner with fuse. Well the thing is… let’s say i have 2 pages, pageA and page B. pageB has a lot text inputs in it. when I navigate (using router) from pageA to pageB, then fill all text inputs and scroll down to the bottom of pageB.

then i go back to pageA, then push the pageB again. I expect the pageB will show up with all text inputs’ values cleared and the scroll position is on the very top of the pageB. But what I got is the prev text input values are still there and the scroll position is still on the bottom of the page.

I cannot find the solution for this. then after I read Navigation order doc, I attempt to clear the very front page so when i push the another page it will has initial variable and scroll position.

4

If we’re talking about cleaning up your viewmodel, you should take care of that yourself. For example, to reset a ScrollPosition to 0, you could do something like this on your pageB (code not tested):

<Panel ux:Template="pageB">
    <WhileInactive>
        <Set sv.ScrollPosition="0" />
    </WhileInactive>
    <ScrollView ux:Name="sv">
        <!-- ... -->
    </ScrollView>
</Panel>

That said, there is a shortcut with the Navigator.Reuse property I mentioned. Here’s a complete, minimal, working example:

<App>
    <Router ux:Name="router" />

    <JavaScript>
        function openPageB() {
            router.push("pageB",{});
        }
        module.exports = {
            openPageB: openPageB
        };
    </JavaScript>

    <Panel ux:Class="ListItem" Height="128">
        <string ux:Property="Label" />
        <TextInput Value="{ReadProperty Label}" TextAlignment="Center" TextColor="#fff" />
        <Rectangle Color="#0002" CornerRadius="2" />
    </Panel>

    <Navigator DefaultPath="pageA">
        <Panel ux:Template="pageA" Color="#18f">
            <Rectangle Alignment="Center" Color="#fff" CornerRadius="2" Clicked="{openPageB}">
                <Text Value="Open page B" Color="#000a" Margin="16,8" />
            </Rectangle>
        </Panel>
        <Panel ux:Template="pageB" Color="#f81" Navigator.Reuse="None">
            <ScrollView>
                <StackPanel Margin="2" ItemSpacing="2">
                    <ListItem Label="1" />
                    <ListItem Label="2" />
                    <ListItem Label="3" />
                    <ListItem Label="4" />
                    <ListItem Label="5" />
                    <ListItem Label="6" />
                    <ListItem Label="7" />
                    <ListItem Label="8" />
                </StackPanel>
            </ScrollView>
        </Panel>
    </Navigator>
</App>