Vue Router Avançado

Entre suas funcionalidades avançadas estão os guardas de navegação, transições de rotas e a correspondência de rotas dinâmicas com parâmetros. Vamos explorar cada uma dessas características:

Guardas de Navegação

Os guardas de navegação são métodos utilizados para controlar o acesso às rotas na sua aplicação Vue. Eles são extremamente úteis para lidar com autenticações, autorizações, e outros tipos de controle de acesso antes que a navegação seja efetivamente realizada.

Tipos de Guardas:

1. Guardas Globais:

   • beforeEach: Executado antes de qualquer rota ser carregada.
   • beforeResolve: Similar ao beforeEach, mas executado depois de todos os guardas de rota locais e componentes.
   • afterEach: Executado depois que a navegação para uma rota é confirmada, não tem capacidade de bloqueio.

2. Guardas de Rota Específica:

   • beforeEnter: Definido diretamente na configuração da rota, útil para proteger rotas específicas.

3. Guardas no Nível do Componente:

   • beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave: Definidos dentro dos componentes.

Exemplo de beforeEach para verificar autenticação:

router.beforeEach((to, from, next) => {
  if (
    to.matched.some((record) => record.meta.requiresAuth) &&
    !auth.isAuthenticated()
  ) {
    next({ path: "/login", query: { redirect: to.fullPath } });
  } else {
    next();
  }
});

Transições de Rotas

Vue Router permite adicionar transições aos componentes de rota, tornando as mudanças de visualização mais suaves e visuais. Utiliza-se a tag <transition> do Vue em conjunto com CSS para definir a animação.

Exemplo de transição:

<transition name="fade" mode="out-in">
  <router-view></router-view>
</transition>

CSS para transição:

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

Correspondência de Rota Dinâmica com Parâmetros

Vue Router permite definir rotas que correspondem a padrões dinâmicos, útil para quando os URLs incluem dados variáveis como IDs de usuários ou nomes de produtos.

Exemplo de rota dinâmica:

const router = new VueRouter({
  routes: [{ path: "/user/:id", component: User }],
});

No exemplo acima, :id é um parâmetro de rota que pode ser acessado dentro do componente User através de this.$route.params.id. Isso permite que o componente carregue dados específicos baseados no ID fornecido na URL.

Combinando tudo: A capacidade de interagir com a navegação do usuário, aplicar transições visuais e manipular parâmetros de rota, proporciona um controle robusto e capacidades avançadas para aplicativos Vue.js, resultando em uma experiência de usuário fluida e segura.

Parâmetros de Rota

Os parâmetros de rota são segmentos do URL que são variáveis. Eles são prefixados com : em definições de rota e são usados para capturar os valores presentes na URL no local do parâmetro. Estes valores são então disponibilizados no objeto $route da aplicação Vue.

Exemplo de rota com parâmetros:

{
  path: '/user/:userId',
  component: User
}

No exemplo acima, :userId é um parâmetro dinâmico. Acessando a URL /user/123 fará com que o componente User seja carregado, e o valor 123 estará disponível como this.$route.params.userId.

Parâmetros Opcionais e Zero ou Mais / Um ou Mais

Você pode tornar os parâmetros opcionais adicionando ? após o nome do parâmetro. Para capturar zero ou mais ou um ou mais valores, você pode usar * ou +, respectivamente.

Exemplo com parâmetros opcionais e repetidores:

{
  path: "/archive/:year?";
}
{
  path: "/files/*filePath";
}
{
  path: "/breadcrumbs/:path+";
}

• No primeiro exemplo, year é opcional. A rota pode ser acessada como /archive ou /archive/2021.
• No segundo, *filePath pode representar qualquer caminho de arquivo, como /files/folder/subfolder/file.
• No terceiro, :path+ deve ter pelo menos um segmento, como /breadcrumbs/2021/jan.

Correspondência Avançada com Expressões Regulares

Para casos em que os parâmetros precisam seguir um formato específico, Vue Router permite o uso de expressões regulares.

Exemplo com expressão regular:

{
  path: "/order/:orderId(\\d+)";
}

Aqui, o orderId deve ser um número (\d é um dígito e + indica um ou mais).

Uso de Wildcards

Para casos em que você quer capturar tudo após um certo ponto no caminho, você pode usar o wildcard *.

Exemplo de wildcard:

{
  path: "/docs/*any";
}

Esse padrão capturará qualquer rota que comece com /docs/, como /docs/installation e /docs/installation/linux.

Considerações sobre Correspondência de Rota

1. Ordem das Rotas: Vue Router corresponde rotas na ordem em que são definidas. Portanto, as rotas mais específicas devem vir antes das mais genéricas se elas compartilham o mesmo segmento inicial.
2. Sensibilidade a Maiúsculas e Minúsculas: As rotas são sensíveis a maiúsculas e minúsculas por padrão, mas isso pode ser configurado.
3. Modo de Histórico: Vue Router pode funcionar em modo de história HTML5 ou modo hash. O modo de história oferece URLs limpas, mas requer configuração no servidor para direcionar todas as solicitações para o index.html da aplicação SPA.

Compreender e utilizar a sintaxe de correspondência de rota do Vue Router permite aos desenvolvedores criar aplicações dinâmicas e responsivas que reagem inteligentemente às mudanças de URL, melhorando a navegabilidade e a experiência do usuário.