Close
Cliquez ici pour la documentation v3.x.

Guide

You’re browsing the documentation for v2.x and earlier. For v3.x, click here.

Routage

Routeur officiel

Pour la plupart des applications monopages, il est recommandé d’utiliser la bibliothèque officiellement supportée vue-router. Pour plus de détails, voir la documentation de vue-router.

Du routage simple en partant de zéro

Si vous avez simplement besoin d’un routage très simple et ne souhaitez pas ajouter une bibliothèque riche en fonctionnalités, vous pouvez le faire en déclenchant dynamiquement le rendu d’un composant de page de cette manière :

const NotFound = { template: '<p>Page not found</p>' }
const Home = { template: '<p>home page</p>' }
const About = { template: '<p>about page</p>' }

const routes = {
  '/': Home,
  '/about': About
}

new Vue({
  el: '#app',
  data: {
    currentRoute: window.location.pathname
  },
  computed: {
    ViewComponent () {
      return routes[this.currentRoute] || NotFound
    }
  },
  render (h) { return h(this.ViewComponent) }
})

Combiné à l’API HTML5 History, vous pouvez construire un routeur client basique mais parfaitement fonctionnel.
Pour en voir une démonstration, faites un checkout de cette application d’exemple.

Intégrer des routeurs tierce-partie

S’il y a un routeur tierce-partie que vous préférez utiliser, tel que Page.js ou Director, l’intégration est tout aussi simple. Voici un exemple complet qui utilise Page.js.

← Déploiement en production Gestion de l'état →
Une erreur dans cette page ou une envie de contribuer à la traduction ? Éditez cette page sur GitHub !