Pages

What is a Page?

A Page is a scene that represents a route.

• Any non-group¹ folder under routes can have a +page.tscn file.
• Pages can have a script (+page.gd) like any other scene.

Changing Pages

You can change to a new page or route by calling the Router.goto() function. For example, if I wanted to load routes/signup/+page.tscn I can call Router.goto("/signup") on a button pressed script.

Router.goto("/signup")

Accessing the Current Page

You can access the current page by using the Router.page variable or by connecting to the Router.page_changed signal. The page variable is a resource of the type Page that extends the Route resource.

extends Resource
class_name Route
 
## A Route represents a layout or page.
 
# A reference to the Node in the scene tree.
var node: Node
 
# A dictionary of arbitrary data associated with this route.
# Route data is merged together for the current `Router.page`.
var data: Dictionary[String, Variant]

extends Route
class_name Page
 
## A Page represents a navigable page or route in the application.
 
# The url that this page is associated with.
var url: String
 
# A dictionary of parameters extracted from the url when this page is navigated to.
# A url like "/user?id=123&q=username" would result in params being { "id": "123", "q": "username" }.
var params: Dictionary[String, String]

url

The Page saves the current url. This is useful for applying logic based on its condition. For example, you could show a back button on a +layout.tscn when not on the main page.

extends Control
 
func _ready() -> void:
	Router.page_changed.connect(_on_page_changed)
	%BackButton.pressed.connect(Router.goto.bind("/"))
 
func _on_page_changed(page: Page) -> void:
	%BackButton.visible = page.url != "/"

params

The Page saves params passed in from the url as a dictionary. You can pass in params with the url by setting a key-value pairs following a ?. For example, Router.goto("/user?id=123&q=username") would result in params { "id": "123", "q": "username" }.

data

The Page saves data set via code from layouts or itself by calling Router.set_data(node, data). This data will contain a merged dictionary of all the parent layouts.

func _ready() -> void:
    Router.set_data(self, { "show_button": true })

func _ready() -> void:
    Router.set_data(self, { "show_button": false, "extra_data" : ... })

The latest routes take priority for the Page.data. In the above example, the Page.data["show_button"] would be false since it overrides its layout data.

Navigating to another page under that layout that does not have the "show_button" data would result in it going back to true.