routing.md

Enrutamiento

Enrutador Oficial

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

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')

Combinado con la API de Historial, 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.

Integrando Enrutadores de Terceros

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