Algumas vezes precisamos forçar a navegação de nosso aplicativo usando JavaScript. Por exemplo; supondo que você tenha criado uma página de login em seu aplicativo e após o login o usuário deverá ser redirecionado para outra página.
No entanto, não podemos criar estes redirecionamentos com JS Nativo, conforme já vimos a troca de páginas no Framework7 é feita através de rotas definidas no my-app.js. Eu ensino como criar as páginas internas do aplicativo e como linkar elas no final desta aula – Como criar uma interface para seu aplicativo mobile usando Framework7
Código para redirecionar uma página no Framework7 v3
No Framework7 versão 3, o código responsável por criar os redirecionamentos é este: mainView.router.loadPage(rotaRedirecionamento);. Veja mais detalhes na documentação do F7 aqui .
Recomendo criar uma função para facilitar a vida. Recomendo também que crie arquivo separado para codificar as funções do aplicativo. Durante as aulas eu sempre crio com os estudantes o arquivo funcoes.js
/* Redirecionamento conteúdo da página */
function Redireciona(pagina) {
console.log('redirecionando para ' + pagina);
mainView.router.loadPage(pagina);
}
Perceba que a função possui de parâmetro chamado pagina e aqui devemos colocar o nome da página que queremos redirecionar. Por exemplo;
Redireciona('minhapaginas.html');
ou
Redireciona('catalogo.html');
Código para redirecionar uma página no Framework7 v4
A versão mais recente, a v4, temos que substituir o código mainView.router.loadPage(pagina); por mainView.router.navigate({ name: 'pagina' });. Então a mesma função no F7 v4 ficaria assim;
/* Redirecionamento conteúdo da página */
function Redireciona(pagina) {
console.log('redirecionando para ' + pagina);
mainView.router.navigate({ name: 'pagina' });
}
Mas não é só isso, a versão 4 trabalha com o nome da página e não com o nome do arquivo. Devemos então definir o nome da página no my-app.js, devemos acrescentar dentro do routes o parâmetro name, ficando assim;
routes: [
{
name: 'pagina', // novidade no F7 v4
path: '/pagina/',
url: 'pagina.html',
},