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>