19 - Rotas

Olá pessoal, na décima nona aula do treinamento de Vue.js, iremos trabalhar com rotas.

As rotas servem para navegarmos entre páginas, equivale ao comando a href do HTML.

Faremos uma estrutura bem simples, haverá quatro componentes, sendo eles:

Exemplo12Rotas.vue: Responsável pela configuração das nossas rotas.
Pagina1.vue: Uma página contendo apenas um título
Pagina2.vue: Outra página contendo apenas um título
PaginaErro.vue: Essa terceira página será exibida, quando tentarmos acessar uma rota que não existe.

Veja abaixo a estrutura do nosso componente: Exemplo12Rotas.vue:

<script setup>
  // Importações do Vue
  import { ref, computed } from 'vue'

// Páginas
  import Pagina1 from './Pagina1.vue'
  import Pagina2 from './Pagina2.vue'
  import PaginaErro from './PaginaErro.vue'

// Criar uma estrutura de rotas, contendo o caminho e o camponente
  const routes = {
    '/': Pagina1,
    '/pagina2': Pagina2,
    '/404': PaginaErro
  }

// Obter o conteúdo a partir da cerquila, exemplo: http://localhost:5173/#/sobre o retorno será: #/sobre
  const referenciaRota = ref(window.location.hash)

// Executa a ação quando realizar a navegação entre páginas. Obter o conteúdo a partir da cerquilha
  window.addEventListener('hashchange', () => {
    referenciaRota.value = window.location.hash
  });

// Função responsável por exibir a página específica
  const currentView = computed(() => {
    return routes[referenciaRota.value.slice(1) || '/'] || PaginaErro
  })
</script>

<template>
  
  <a href="#/">Página 1</a>
  |
  <a href="#/pagina2">Página 2</a>

<component :is="currentView" />
</template>

Agora podemos criar os demais componentes, que serão responsáveis pela estrutura de páginas:

O arquivo App.vue, iremos importar o componente e realizar a referência no HTML:

Abaixo deixo um vídeo mostrando cada etapa desta aula: