routage
Répertoire
Itinéraire Officiel
Pour la plupart des applications d'une seule page, il est recommandé d'utiliser la bibliothèque vue-router officiellement prise en charge. Plus de détails peuvent être trouvés dans la documentation 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 introduire une bibliothèque de routage complète, vous pouvez restituer dynamiquement un composant au niveau de la page comme celui-ci :
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) }
})En combinaison avec l'API HTML5 History, vous pouvez créer un routeur client aussi petit qu'un moineau et doté de tous les éléments essentiels. Vous pouvez voir directement l'exemple d'application.
Intégrer le routage tiers
Si vous avez un routage tiers préféré, tel que Page.js ou Director, son intégration est tout aussi simple. Voici un exemple complet utilisant Page.js.
