Roteamento ​

Roteamento do Lado do Cliente vs Lado do Servidor ​

Rotear no lado do servidor significa que o servidor envia uma resposta baseada no caminho da URL que o utilizador visita. Quando clicamos sobre uma ligação numa aplicação da Web interpretada do lado do servidor tradicional, o navegador recebe uma resposta de HTML a partir do servidor e recarrega a página inteira com o novo HTML.

Numa Aplicação de Página Única (SPA, sigla em Inglês), no entanto, a JavaScript do lado do cliente pode intercetar a navegação, pedir dinamicamente novos dados, e atualizar a página atual sem recarregamento completo da página. Isto normalmente resulta numa experiência de uso mais elegante, especialmente para os casos de uso que são mais como "aplicações" de verdade, onde o utilizador é esperado realizar muitas interações sobre um longo período de tempo.

Em tais aplicações de página única, o "roteamento" é feito sobre o lado do cliente, no navegador. Um roteador do lado do cliente é responsável por gerir a visão interpretada da aplicação usando as APIs do navegador tais como API de História ou o evento hashchange.

Roteador Oficial ​

A Vue está bem adaptada para construir aplicações de página única. Para a maioria das aplicações de página única, é recomendado usar a biblioteca Vue Router suportada oficialmente. Para mais detalhes, consultar a documentação da Vue Router.

Roteamento Simples do Zero ​

Se apenas precisarmos dum roteamento muito simples e não desejarmos envolver uma biblioteca roteadora completa, podemos fazer isto com os Componentes Dinâmicos e atualizar o estado do componente atual ouvindo os eventos de hashcache do navegador ou usando a API de História.

Eis um exemplo simples:

<script setup>
import { ref, computed } from 'vue'
import Home from './Home.vue'
import About from './About.vue'
import NotFound from './NotFound.vue'

const routes = {
  '/': Home,
  '/about': About
}

const currentPath = ref(window.location.hash)

window.addEventListener('hashchange', () => {
  currentPath.value = window.location.hash
})

const currentView = computed(() => {
  return routes[currentPath.value.slice(1) || '/'] || NotFound
})
</script>

<template>
  <a href="#/">Home</a> |
  <a href="#/about">About</a> |
  <a href="#/non-existent-path">Broken Link</a>
  <component :is="currentView" />
</template>

<script>
import Home from './Home.vue'
import About from './About.vue'
import NotFound from './NotFound.vue'

const routes = {
  '/': Home,
  '/about': About
}

export default {
  data() {
    return {
      currentPath: window.location.hash
    }
  },
  computed: {
    currentView() {
      return routes[this.currentPath.slice(1) || '/'] || NotFound
    }
  },
  mounted() {
    window.addEventListener('hashchange', () => {
		  this.currentPath = window.location.hash
		})
  }
}
</script>

<template>
  <a href="#/">Home</a> |
  <a href="#/about">About</a> |
  <a href="#/non-existent-path">Broken Link</a>
  <component :is="currentView" />
</template>