loader image

Como criar um redirecionamento de página com Framework7

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

Deixe seu comentário