Enrutamiento ​

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

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

Sin embargo, en una Aplicación de una Sola página (SPA), el JavaScript del lado del cliente puede interceptar la navegación, obtener dinámicamente nuevos datos y actualizar la página actual sin necesidad de recargarla por completo. Esto generalmente da como resultado una experiencia de usuario más ágil, especialmente para casos de uso que se parecen más a "aplicaciones" reales, donde se espera que el usuario realice muchas interacciones durante un largo período de tiempo.

En estas SPA, el "enrutamiento" se realiza en el lado del cliente, en el navegador. Un enrutador del lado del cliente se encarga de administrar la vista renderizada de la aplicación utilizando las API del navegador, como la API del historial o el evento hashchange.

Router Oficial ​

Vue es muy adecuado para construir SPA. Para la mayoría de las SPA, se recomienda utilizar la librería Vue Router, que cuenta con soporte oficial. 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 componente escuchando los eventos de hashchange del navegador o usando la API de historial.

Este es un ejemplo de lo que se puede hacer:

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