# Enrutamiento

# Enrutador Oficial

Para la mayoría de aplicaciones de una sola página, es recomendable utilizar la librería oficialmente soportada vue-router (opens new window). Para más detalles, véase la documentación de Vue Router (opens new window).

# Enrutamiento Sencillo desde Cero

Si usted solo necesita enrutamiento muy sencillo y no desea involucrarse con una librería de enrutamiento con todas características, puede hacerlo renderizando dinámicamente un componente a nivel de página como se muestra a continuación:

const { createApp, h } = Vue

const NotFoundComponent = { template: '<p>No se encuentra la página</p>' }
const HomeComponent = { template: '<p>Página de inicio</p>' }
const AboutComponent = { template: '<p>Página «Acerca de» </p>' }

const routes = {
  '/': HomeComponent,
  '/about': AboutComponent
}

const SimpleRouter = {
  data: () => ({
    currentRoute: window.location.pathname
  }),

  computed: {
    CurrentComponent() {
      return routes[this.currentRoute] || NotFoundComponent
    }
  },

  render() {
    return h(this.CurrentComponent)
  }
}

createApp(SimpleRouter).mount('#app')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

Combinado con la API de Historial (opens new window), puede construir un enrutador muy básico pero completamente funcional en el cliente. Para ver eso en práctica, Consulte esta aplicación de ejemplo (opens new window).

# Integrando Enrutadores de Terceros

Si existe un enrutador de terceros que prefiera utilizar, como Page.js (opens new window) o Director (opens new window), la integración es sencillamente similar (opens new window). Aquí encontrará un ejemplo completo (opens new window) empleando Page.js.

← Despliegue de Producción Manejo de Estados →