Router Class

Manages routing and navigation history for part or all of a Fuse app.

Note: It is recommended that you first read the Navigation guide for a full overview of Fuse's navigation system.

The Router class, along with router outlets such as Navigator and PageControl, forms the basis of navigation in Fuse. To navigate in a Fuse app, a route is sent to a Router instance. This route consists of one or many parts, which each consist of a string path that identifies a target to navigate to, and optionally, some data to send to this target when navigating to it.

When a Router receives a route, it will recursively perform navigation for the different parts of the route. For each part, it will search its immediate UX tree to locate a router outlet that will use this part's string path to navigate to part of the app. This could represent, for example, the template key of a template in a Navigator, or the name of a Page in a PageControl.

A router can go directly between routes with goto, or navigate heirarchically using push and goBack.

Typically, an app will use a single, global Router instance which will work from the App root, and represents a single navigation context for the entire app. It's possible, however, to create separate routers for different localized parts of the UX tree, which can be useful if, for example, a different history needs to be kept for part of the app.

Example

The following example illustrates a basic navigation setup using a Router and Navigator. For a complete introduction and proper examples of Fuse's navigation system, see the Navigation guide.

<JavaScript>
    module.exports = {
        gotoFirst: function() { router.goto("firstPage"); },
        gotoSecond: function() { router.goto("secondPage"); }
    };
</JavaScript>

<Router ux:Name="router" />

<DockPanel>
    <Navigator DefaultTemplate="firstPage">
        <Page ux:Template="firstPage">
            <Text Alignment="Center">This is the first page.</Text>
        </Page>
        <Page ux:Template="secondPage">
            <Text Alignment="Center">This is the second page.</Text>
        </Page>
    </Navigator>

    <Grid Dock="Bottom" Columns="1*,1*">
        <Button Text="First page" Padding="20" Clicked="{gotoFirst}" />
        <Button Text="Second page" Padding="20" Clicked="{gotoSecond}" />
    </Grid>
</DockPanel>

Page Navigation Order

The history of the router follows the standard history ordering, newest routes are at the front of the history, older routes at the back.

The router however does not decide on the navigation order of the pages in the individual controls, as described in Navigation Order. This is controlled by each outlet being used.

Location

Namespace
Fuse.Navigation
Package
Fuse.Navigation 2.9.1
Show Uno properties and methods

Interface of Router

BackButtonAction : BackButtonAction ux

Specifies what happens when the device's back button is pressed. The default is GoBack. If your app has multiple routers or you want to handle back button logic manually, you can set this to None.

bookmark(bookmark) js

Registers a named bookmark for the router. bookmark is a key/value pair, formatted as an object containing the following:

GoBack : bool uno

Goes back to the previous page in the navigation history, or up one level in the route if the history is empty.

goBack() js

Pops an item off the history returning to the previous page (the one prior to the last push operaton). If there is no previous item, this will go up instead (return to a higher level path segment).

IsMasterRouter : bool ux

If true indicates this is the primary router of the application -- has implications for integration with Preview.

Push(Route, string) uno

Pushes the current route (if any) on navigation history and navigates to the specified route.

Inherited from Node

ContextParent : Node uno

The context parent is the semantic parent of this node. It is where non-UI structure should be resolved, like looking for the DataContext, a Navigation, or other semantic item.

FindNodeByName(Selector, Predicate<Node> (Node)) : Node uno

Finds the first node with a given name that satisfies the given acceptor. The serach algorithm works as follows: Nodes in the subtree are matched first, then it matches the nodes in the subtrees ofthe ancestor nodes by turn all the way to the root. If no matching node is found, the function returns null.

IsRootingStarted : bool uno

Whether rooting of this node has started. Note that even if this property returns true, rooting may not yet be completed for the node. See also IsRootingCompleted.

Name : Selector ux

Run-time name of the node. This property is automatically set using the ux:Name attribute.

OnRooted uno

If you override OnRooted you must call base.OnRooted() first in your derived class. No other processing should happen first, otherwise you might end up in an undefined state.

Inherited from PropertyObject

Inherited from object

Attached UX Attributes

GlobalKey (attached by Resource) : string ux

The ux:Global attribute creates a global resource that is accessible everywhere in UX markup.

Implemented Interfaces

IBaseNavigation uno

A minimal interface implemented by simple navigation behaviors and controls.

IScriptObject uno

Interface for objects that can have a script engine representation