Enrutamiento ​

Enrutamiento del Lado del Cliente vs. del Lado del Servidor ​

El enrutamiento del lado del servidor significa que el servidor envía una respuesta basada en la ruta URL que el usuario está visitando. Cuando hacemos clic en un enlace en una aplicación web tradicional renderizada por el servidor, el navegador recibe una respuesta HTML del servidor y recarga la página completa con el nuevo HTML.

En una Aplicación de una Sola Página (SPA), sin embargo, el JavaScript del lado del cliente puede interceptar la navegación, obtener datos dinámicamente y actualizar la página actual sin recargas completas de la página. Esto suele resultar en una experiencia de usuario más ágil, especialmente para casos de uso que son más parecidos a "aplicaciones" reales, donde se espera que el usuario realice muchas interacciones durante un largo período de tiempo.

En tales SPAs, el "enrutamiento" se realiza del lado del cliente, en el navegador. Un enrutador del lado del cliente es responsable de gestionar la vista renderizada de la aplicación utilizando APIs del navegador como la History API o el hashchange event.

Enrutador Oficial ​

Vue es muy adecuado para construir SPAs. Para la mayoría de las SPAs, se recomienda usar la librería oficial de Vue Router. Para más detalles, consulta la documentación de Vue Router.

Enrutamiento Simple desde Cero ​

Si solo necesitas un enrutamiento muy simple y no deseas involucrar una librería de enrutamiento completa, puedes hacerlo con Componentes Dinámicos y actualizar el estado del component actual escuchando los hashchange events del navegador o usando la History API.

Aquí tienes un ejemplo básico:

<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="#/">Inicio</a> | <a href="#/about">Acerca de</a> |
  <a href="#/non-existent-path">Enlace Roto</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="#/">Inicio</a> | <a href="#/about">Acerca de</a> |
  <a href="#/non-existent-path">Enlace Roto</a>
  <component :is="currentView" />
</template>