I'm new to Q2 development- so I'm not going to claim this is the best way to do things, but I can share what's worked for me.

I would start by setting up the different pages in the routing configuration:

router.update(
{
'default': self.render_default_template,
'page1': self.render_page1_template,
'page2': self.render_page2_template,
'page3': self.render_page3_template
}
)

And then there's 3 ways I know of that you can route from one page to another:

1- Put a submit button on the page's template, and the routing key you setup in the get_tecton_form() method will determine the next page that's displayed.

2- In an event handler, change the value of the hidden input with name of "routing_key" and then use the submitForm() function. Here's an example assuming we're currently seeing page2:

onNextButtonClicked = function() {
$('input[name="routing_key"]').val('page3');
submitForm();
}

onPreviousButtonClicked = function() {
$('input[name="routing_key"]').val('page1');
submitForm();
}

A variation on this idea would be making a function like this:

navigateToRoute = function(routingKey) {
$('input[name="routing_key"]').val(routingKey);
submitForm();
}

And then something like this:

onNextButtonClicked = function() {
navigateToRoute('page3');
}

onPreviousButtonClicked = function() {
navigateToRoute('page1');
}

3- Or you can setup anchor tags with the routing key used inside the href attribute, preceded by a pound sign/hash symbol:

<a href="#page1">Click here to route to page 1</a>
<a href="#page2">Click here to route to page 2</a>
<a href="#page3">Click here to route to page 3</a>

Hope this helps!