Comment gérer le routage dans Vue avec Vue Router

Vue Router, le routeur officiel de Vue, permet de créer des applications monopage (SPA) dans Vue. Vue Router vous permet de mapper les composants de votre application Web sur différents itinéraires de navigateur, de gérer la pile d'historique de votre application et de configurer des options de routage avancées.

Premiers pas avec le routeur Vue

Pour démarrer avec Vue Router, exécutez ce qui suit npm (gestionnaire de paquets de nœuds) commande dans votre répertoire préféré pour créer votre application Vue :

npm create vue 

Lorsque vous êtes invité à ajouter Vue Router pour Demande d'une seule page développement, sélectionnez Oui.

Ensuite, ouvrez votre projet dans votre éditeur de texte préféré. Votre application src répertoire doit inclure un routeur dossier.

Le routeur dossier abrite un index.js fichier contenant le code JavaScript permettant de gérer les routes dans votre application. Le index.js fichier importe deux fonctions de la vue-routeur emballer: créer un routeur et createWebHistory.

Le créer un routeur La fonction crée une nouvelle configuration de route à partir d'un objet. Cet objet contient le histoire et itinéraires clés et leurs valeurs. Le itinéraires key est un tableau d'objets détaillant la configuration de chaque route, comme le montre l'image ci-dessus.

Après avoir configuré vos itinéraires, vous devez exporter ce routeur instance et importer cette instance dans le main.js déposer:

import'./assets/main.css'
import { createApp } from'vue'
import App from'./App.vue'
import router from'./router'
const app = createApp(App)
app.use(router)
app.mount('#app')

Vous avez importé le routeur fonction dans le main.js fichier, puis fait en sorte que votre application Vue utilise cette fonction de routeur avec le utiliser méthode.

Vous pouvez ensuite appliquer vos itinéraires à votre application Vue en structurant un bloc de code similaire à celui ci-dessous :