Roteador

O roteador é responsável por fazer o roteamento das rotas de um app. Ele é inserido no contexto de todo componente com o nome de $router, o que o torna facilmente acessível.

e.g.

{
  methods: {
    doWork () {
      // ... faz alguma operação e muda de página
      this.$router.push('/outra-pagina')
    },
    doOtherWork () {
      // ... faz alguma operação e muda de página
      this.$router.replace('uma-outra-página')
    }
  }
}

constructor (options: object)

Constrói o roteador de acordo com as rotas.

O objeto options segue a seguinte configuração

Chave Tipo Descrição
beforeEach function Função chamada sempre que uma rota muda. Possui como parâmetros a rota atual e a próxima rota
afterEach function O mesmo que beforeEach, porém executada após uma mudança de rota
routes IRoute[] Lista com a configuração de todas as rotas

A interface IRoute é definido como:

Chave Tipo Descrição
path string Caminho da rota
component IComponent Componente associado à rota
name string Nome da rota
createAtLoad boolean Defina como true se quiser que a rota seja criada assim que o roteador for criado. O ciclo de vida do componente associado será iniciado neste instante.

e.g.

import { MbRouter } from 'mamba-websdk'

import Page1 from '../pages/page1'
import Page2 from '../pages/page2'
import Page3 from '../pages/page3'

export new MbRouter({
  beforeEach: (from, to) => {
    console.log(from, to)
  },
  routes: [
    {
      name: 'home',
      path: '/',
      component: Page1
    },
    {
      path: '/page2',
      component: Page2,
      createAtLoad: true
    },
    {
      path: '/page3',
      component: Page3
    }
  ]
})

install (mamba: Mamba)

Instala o roteador na instância do Mamba para torná-lo acessível em todos os componentes. Além disso, o roteador é iniciado de fato

Esta função não deve ser chamada diretamente. Ela é chamada automaticamente ao utilizar a função Mamba.use

e.g.

import Mamba from '../../../src'
import router from './router'

/* eslint-disable no-new */
new Mamba({
  el: '#app'
})

Mamba.use(router)

go (n: number)

Se desloca pelo histórico n vezes. Se n for positivo, se desloca para as páginas mais atuais, se negativo, para as páginas mais antigas na navegação do usuário

Se não for possível navegar n páginas no histórico, nenhuma operação ocorre. Por exemplo, se houver uma página a frente e uma página atrás no histórico, só é possível realizar a chamada com os valores -1 e 1

e.g.

this.$router.go(-1) // Volta uma página
this.$router.go(2) // Avança duas páginas

replace (route: string)

Substitui a rota atual por outra no histórico.

Caso route seja uma string, há duas possibilidades:

e.g.

import { MbRouter } from 'mamba-websdk'

import Page1 from '../pages/page1'
import Page2 from '../pages/page2'

export new MbRouter({
  routes: [
    {
      name: 'home',
      path: '/',
      component: Page1
    },
    {
      path: '/page2',
      component: Page2
    }
  ]
})

// Em outro arquivo
this.$router.replace('/') // Substitui a rota atual pela rota /
this.$router.replace('home') // Substitui a rota atual pela rota cujo nome é 'home'
this.$router.replace('/page2') // Substitui a rota atual pela rota /page2

push (route: object|string)

O mesmo que replace, porém a rota é adicionada ao final histórico. Depois de executar o push, é possível voltar para a rota anterior

e.g.

import { MbRouter } from 'mamba-websdk'

import Page1 from '../pages/page1'
import Page2 from '../pages/page2'

export new MbRouter({
  routes: [
    {
      name: 'home',
      path: '/',
      component: Page1
    },
    {
      path: '/page2',
      component: Page2
    }
  ]
})

// Em outro arquivo
this.$router.push('/') // Sai da rota atual para a rota /
this.$router.push('home') // Sai da rota atual para a rota cujo nome é 'home'
this.$router.push('/page2') // Sai da rota atual para a rota /page2