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', },