Vue.js pour les débutants Un guide complet du routage avec Vue Router

Comprendre le routage dans Vue.js

Le routage est une fonctionnalité essentielle dans le développement d'applications Web. Dans Vue.js, nous pouvons utiliser Vue Router pour gérer facilement la navigation entre les pages. Dans cet article, nous explorerons comment configurer le routage dans une application Vue.js.

Qu’est-ce que Vue Router ?

Vue Router est la bibliothèque officielle de gestion du routage dans les applications Vue.js. Avec Vue Router, nous pouvons créer des applications monopage (SPA) qui permettent une navigation fluide sans recharger la page.

Installation du routeur Vue

Tout d’abord, nous devons installer Vue Router. Si vous utilisez Vue CLI, vous pouvez choisir de l'installer lors de la création d'un nouveau projet. Sinon, vous pouvez l'installer avec la commande suivante :

npm install vue-router

Configuration du routeur Vue

Après l'installation, nous devons configurer Vue Router. Voici les étapes de base pour le configurer :

• Créer un fichier de routeur Créez un nouveau fichier nommé router.js dans le dossier src : importer Vue depuis 'vue' ; importer le routeur depuis 'vue-router' ; importer Home depuis './views/Home.vue'; importer À propos de './views/About.vue';

Vue.use(Router);

export default new Router({
  mode: 'history', // Using history mode for cleaner URLs
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
    {
      path: '/about',
      name: 'about',
      component: About,
    },
  ],
});

• Intégrer le routeur dans l'application Ensuite, nous devons intégrer le routeur dans notre instance Vue. Modifiez le fichier main.js comme suit :

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

new Vue({
  el: '#app',
  router, // Add the router to the Vue instance
  render: h => h(App),
});

• Utilisation des liens de routeur Pour naviguer entre les pages, nous utilisons le lien composant. Voici un exemple de la façon de l'utiliser dans le fichier App.vue :

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view></router-view> <!-- Place to display the matched component -->
  </div>
</template>

• Créer de nouvelles pages Maintenant, créons deux composants que nous utiliserons : Home.vue et About.vue.

Accueil.vue :

<template>
  <div>
    <h1>Welcome to the Home Page!</h1>
  </div>
</template>

<script>
export default {
  name: 'Home',
};
</script>

À propos de.vue :

<template>
  <div>
    <h1>This is the About Page</h1>
  </div>
</template>

<script>
export default {
  name: 'About',
};
</script>

Vous pouvez maintenant exécuter votre application avec la commande :

npm run serve

Ouvrez votre navigateur et accédez à http://localhost:8080. Essayez de cliquer sur les liens Accueil et À propos pour voir comment fonctionne le routage !

Conclusion

Dans cet article, nous avons couvert les bases du routage dans Vue.js à l'aide de Vue Router. Grâce à cette capacité de routage, vous pouvez créer des applications plus interactives et conviviales. Dans le prochain article, nous pourrons approfondir les fonctionnalités plus avancées de Vue Router, telles que les paramètres de route et les routes imbriquées.

J'espère que vous avez trouvé cet article utile ! N'hésitez pas à laisser un commentaire si vous avez des questions.

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!