close

Routing et Navigation en Vue .js- Un guide complet

Routing et Navigation sont des concepts essentiels dans Vue.js pour créer des pages et naviguer entre elles dans une application Web. est une bibliothèque puissante et flexible pour gérer le système en .js. Vue Router routing Vue

 

Voici les concepts fondamentaux liés à route s dans Vue.js :

  1. Route: A route définit un chemin et le relie à un composant correspondant. Chacun route a un chemin et un composant.

  2. Vue Router: est une bibliothèque pour gérer les s en .js. Il fournit des outils pour définir et gérer les s dans une application. Vue Router route Vue route Vue

  3. Route Composant : chacun route a un composant correspondant. Lorsqu'un route est activé, le composant associé sera affiché.

  4. Dynamique Route: Une dynamique route permet de définir route des s avec des paramètres dynamiques. Par exemple, vous pouvez définir un route avec le chemin "/user/:id" pour afficher les informations de l'utilisateur avec l'id correspondant.

  5. Imbriqué Route: Un imbriqué route est un concept qui vous permet d'imbriquer des enfants route dans un parent route. Cela vous permet de créer route des structures complexes et d'organiser les composants de manière imbriquée.

  6. Redirection Route: Une redirection route permet de rediriger les utilisateurs d'un chemin vers un autre. Ceci est utile lorsque vous souhaitez déplacer route les utilisateurs d'un ancien chemin vers un nouveau.

  7. Route Guard: Un route guard est une fonction qui vous permet de vérifier et de contrôler l'accès à route s. En utilisant route des gardes, vous pouvez définir des conditions pour empêcher les utilisateurs d'accéder à certains route s ou effectuer un traitement spécial avant la redirection.

 

Pour utiliser, vous pouvez suivre ces étapes: Vue Router

Étape 1 : Installer à l'aide de npm ou de fil : Vue Router 

npm install vue-router

ou 

yarn add vue-router

Étape 2: Créez un fichier dans le répertoire racine du projet. Dans ce fichier, nous allons déclarer et configurer le s de l'application. router.js route 

import Vue from 'vue';  
import VueRouter from 'vue-router';  
  
Vue.use(VueRouter);  
  
const router = new VueRouter({
  routes: [  
    // Declare routes here  
  ]  
});  
  
export default router;

Étape 3: Dans le main.js fichier, importez-le et liez-le à l' application : Vue Router Vue 

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

Étape 4: Dans le fichier, vous pouvez déclarer s à l'aide de composants tels que, et d'autres propriétés. router.js route Vue Router path component

Par exemple, vous pouvez déclarer un route pour la page d'accueil et un route pour la page à propos comme suit :

import Home from './components/Home.vue';  
import About from './components/About.vue';  
  
const router = new VueRouter({
  routes: [  
    { path: '/', component: Home },  
    { path: '/about', component: About }  
  ]  
});

Étape 5: Dans Vue les composants, vous pouvez utiliser des composants comme pour créer des liens vers d'autres s et pour afficher le contenu du fichier. <router-link> route <router-view> route

Par exemple, dans le template du composant Home, vous pouvez utiliser pour créer un lien vers la page à propos: <router-link> 

<router-link to="/about">Go to About</router-link>

Dans le template du composant App, vous pouvez utiliser pour afficher le contenu du courant: <router-view> route 

<router-view></router-view>

Avec ces étapes, vous avez configuré et utilisé pour gérer et dans votre application .js. Vue Router routing navigation Vue