Comment écrire le routage statique vue

Vue est un framework JavaScript populaire qui fournit un cadre flexible pour créer des applications Web interactives, dynamiques et évolutives. Vue Router est le plugin officiel de gestion des routes pour Vue.js, qui vous permet de mapper des composants aux routes, permettant ainsi le développement d'applications monopage (SPA).

Vue Router prend en charge deux modes de routage : le mode historique et le mode hachage. Le routage statique est un type de routage qui complète le routage dynamique dans Vue Router. Le routage statique vous permet de mapper un chemin URL vers un composant spécifique, il ne contient pas de paramètres dynamiques.

Alors, comment définir des routes statiques dans l'application Vue ?

1. Créer des fichiers de route

Tout d'abord, vous devez créer un répertoire de routeur dans votre projet Vue. Dans ce répertoire, créez un fichier router.js pour stocker votre configuration de routage.

2. Importer Vue et Vue Router

Au début du fichier, vous devez importer Vue et Vue Router. Voici un exemple de code qui importe Vue et Vue Router :

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

3. Création d'une liste de routes

Ensuite, vous devez créer une instance de routeur qui contient toutes les routes statiques. Une liste de routes régulière devrait ressembler à ceci :

const routes = [
  {
    path: '/home',
    component: Home
  },
  {
    path: '/about',
    component: About
  },
  {
    path: '/contact',
    component: Contact
  }
]

Dans ce code, nous définissons trois routes statiques : /home, /about et /contact. Chaque itinéraire pointe vers un composant différent, qui doit être importé une fois défini.

4. Créez une instance Vue Router

Une fois que vous avez créé votre liste de routes, vous devez l'instancier via Vue Router. Cela se fait avec le code suivant :

const router = new VueRouter({
  routes
});

Dans ce code, nous spécifions notre liste de routes en paramètre et la configuration de routage de l'instance VueRouter est créée.

5. Injectez l'instance de route dans l'instance racine de Vue

Maintenant, nous devons nous assurer que notre application Vue est associée au routeur Vue. Dans votre fichier main.js, enregistrez l'instance de route sur l'instance racine de Vue comme ceci :

import Vue from 'vue'
import App from './App.vue'
import router from './router.js';

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

Votre route a maintenant été intégrée avec succès dans votre application Vue. Essayez d'accéder à n'importe quelle route statique dans votre application et vous devriez voir les composants de la page de route chargés correctement.

Résumé

Cet article vous présente comment définir des routes statiques dans les applications Vue. La définition de routes statiques dans Vue vous permet de mapper facilement les chemins d'URL vers des composants spécifiques, ce qui complète le plugin de gestion des routes Vue Router. Si vous souhaitez en savoir plus sur Vue Router, veuillez vous référer à la documentation officielle.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!