Routage

Routeur officiel

Pour la plupart des applications à page unique, il est recommandé d'utiliser la bibliothèque vue-router (opens new window) officiellement supportée. Pour plus de détails, consultez la documentation (opens new window) de vue-router.

Routage simple à partir de zéro

Si vous n'avez besoin que d'un routage très simple et que vous ne souhaitez pas utiliser une bibliothèque de routeurs complète, vous pouvez le faire en rendant dynamiquement un composant de niveau page comme ceci :

const { createApp, h } = Vue

const NotFoundComponent = { template: '<p>Page not found</p>' }
const HomeComponent = { template: '<p>Home page</p>' }
const AboutComponent = { template: '<p>About page</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')

Combiné à l'API d'historique (opens new window), vous pouvez construire un routeur côté client très basique mais entièrement fonctionnel. Pour voir cela en pratique, consultez cette application d'exemple (opens new window).

Intégration de routeurs tiers

Si vous préférez utiliser un routeur tiers, tel que Page.js (opens new window) ou Director (opens new window), l'intégration est tout aussi simple (opens new window). Voici un exemple complet (opens new window) utilisant Page.js.