O que é o vue-router-ns
O vue-router-ns dá ao NativeScript-Vue 3 a API do Vue Router, construída em cima da pilha de navegação nativa em vez de um histórico de URLs.
const router = createRouter({
routes: [
{ path: '/', name: 'inbox', component: () => import('./pages/Inbox.vue') },
{
path: '/messages/:id',
name: 'message',
component: () => import('./pages/Message.vue'),
},
{ path: '/compose', component: () => import('./pages/Compose.vue'), modal: true },
],
})
router.push({ name: 'message', params: { id: 42 } })Por que não o próprio Vue Router
O Vue Router não consegue guiar um app mobile: ele modela a navegação como uma URL que muda, com um <RouterView> que troca componentes. Um app NativeScript tem um Frame com uma pilha de páginas que continuam vivas umas sob as outras, um botão de voltar e um swipe no iOS que removem páginas sem perguntar a ninguém, modais, e muitas vezes uma pilha por aba.
Então isto não é um wrapper do Vue Router. A back stack do frame é a fonte da verdade, e o router a espelha depois de cada navegação nativa. O que você recebe é a API que já conhece (push, guards, useRoute, rotas nomeadas, params) com uma semântica que faz sentido num celular.
O que ele cobre
- Uma rota por página: o
useRoute()dentro de uma página nunca muda, mesmo com outras páginas por cima. - Leave guards pelos quais passam o botão de voltar do Android, o botão de voltar do iOS e o swipe para baixo de um modal, e que desligam o swipe do iOS enquanto bloqueariam.
- Rotas modais com a própria pilha, e
pushForResult()para receber um valor de volta de uma página. - Uma pilha por aba, com o toque na aba ativa voltando para a primeira página.
- Rotas tipadas: nomes e params checados no app inteiro, sem geração de código.
- Deep links que trazem os pais junto, a pilha inteira definida como lista, e a restauração dela depois que o app é morto.
- Predictive back no Android para páginas que querem acompanhar o swipe.
Por onde começar
- Instale e monte um
<RouterView>. - Leia Navegando e Cada página guarda sua rota: é onde ele mais difere da web.
- Vindo do Vue Router, passe pelas diferenças.
Está em beta, publicado sob a tag next. O router é coberto por testes contra um Frame substituto, e as partes que tocam a plataforma estão sendo conferidas em aparelhos uma a uma.