Introduction à la méthode d'utilisation du routage imbriqué dans Vue.js

À mesure que les applications monopage (SPA) Vue.js deviennent assez complexes, vous commencez à avoir besoin de routes Vue et de routes imbriquées. Le routage imbriqué permet des interfaces utilisateur et des composants plus complexes imbriqués les uns dans les autres. Créons un cas d'utilisation relativement simple pour démontrer l'utilité du routage imbriqué dans Vue Router.

Configurer avec Vue CLI

Si ce n'est pas déjà installé, exécutez la commande suivante pour installer Vue CLI globalement :

$ npm install -g @vue/cli

ou

$ yarn global add @vue/cli

Vous pouvez maintenant installez-le à partir de la commande Exécutez maintenant la commande vue. Créons une application Vue appelée alligator-nest :

$ vue create alligator-nest

Sélectionnez le préréglage par défaut à l'invite (appuyez sur Entrée). Après cela, exécutez la commande suivante :

$ npm install vue-router

Ensuite, ouvrez le répertoire alligator-nest dans l'éditeur de votre choix.

Code de base

Le CSS suivant nous aidera à positionner les éléments pour l'interface utilisateur. Ajoutez-le en tant que fichier de feuille de style au dossier public/ et référencez-le dans public/index.html . Pour cela nous utiliserons la grille CSS :

grid.css

.row1 {
  grid-row-start: 1;
  grid-row-end: 2;
}

.row12 {
  grid-row-start: 1;
  grid-row-end: 3;
}

.row123 {
  grid-row-start: 1;
  grid-row-end: 4;
}

.row2 {
  grid-row-start: 2;
  grid-row-end: 3;
}

.row23 {
  grid-row-start: 2;
  grid-row-end: 4;
}

.row3 {
  grid-row-start: 3;
  grid-row-end: 4;
}

.col1 {
  grid-column-start: 1;
  grid-column-end: 2;
}

.col12 {
  grid-column-start: 1;
  grid-column-end: 3;
}

.col123 {
  grid-column-start: 1;
  grid-column-end: 4;
}

.col1234 {
  grid-column-start: 1;
  grid-column-end: 5;
}

.col2 {
  grid-column-start: 2;
  grid-column-end: 3;
}

.col23 {
  grid-column-start: 2;
  grid-column-end: 4;
}

.col234 {
  grid-column-start: 2;
  grid-column-end: 5;
}

.col3 {
  grid-column-start: 3;
  grid-column-end: 4;
}

.col34 {
  grid-column-start: 3;
  grid-column-end: 5;
}

.col4 {
  grid-column-start: 4;
  grid-column-end: 5;
}

Ensuite, ajoutons le fichier par défaut pour vue-cli Apportez quelques modifications .

Supprimez src/components du dossier HelloWorld.vue et supprimez tout ce qui s'y rapporte de src/App.vue. Apportez les modifications suivantes à la balise HTML et aux styles CSS dans App.vue.

<template>
  <div id="app">
    <h1 class="row1 col12">Alligator Nest</h1>
    <a class="row1 col3">Travels</a>
    <a class="row1 col4">About</a>
    <div class="row2 col234"></div>
  </div>
</template>
html, body {
  height: 100vh;
  width: 100vw;
  padding: 0;
  margin: 0;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  padding: 2%;
  height: 100%;
  display: grid;
  grid-template-rows: 20% 80%;
  grid-template-columns: 25% 25% 25% 25%;
}

Si vous exécutez npm run serve à la racine de votre projet, vous pouvez survoler localhost:8080 dans votre navigateur et voir la disposition du cadre. Ces display:grid attributs sont utiles ! Nous pouvons maintenant commencer à créer des itinéraires.

Entrez la route Vue

Créez un composant nommé /components dans le dossier AboutPage.vue. Cela ressemble à ceci :

<template>
  <div>
    <h2>About</h2>
    <p>Alligators were around during the time of the dinosaurs.</p>
  </div>
</template>

<script>
  export default {
    name: &#39;AboutPage&#39;,
  }
</script>

<style scoped>
  
</style>

Maintenant, notre fichier main.js a besoin de la route /about. Cela ressemble à ceci.

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

Vue.config.productionTip = false;

import VueRouter from 'vue-router';
Vue.use(VueRouter);

import AboutPage from './components/AboutPage.vue';

const routes = [
  { path: '/about', component: AboutPage },
]

const router = new VueRouter({
  routes
})

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

Enfin, revenons à App.vue et changeons la balise d'ancrage « À propos » en une balise to="/about" avec l'attribut <router-link>. Ensuite, remplacez le deuxième div par une balise <router-view>. Assurez-vous de conserver les propriétés de la classe de positionnement de la grille inchangées.

Nous disposons désormais d'un squelette de site entièrement fonctionnel avec un routage géré pour la page « À propos ».

Nous nous concentrons ici sur la fonction de routage, nous ne passerons donc pas trop de temps sur le style. Néanmoins, nous souhaitons rendre la page Travels un peu plus soignée.

Tout d'abord, créez un TravelPage de la même manière que vous créez un AboutPage. Faites-y référence dans main.js.

Vous devrez également créer les deux composants suivants, qui seront finalement imbriqués dans TravelPage.vue :

TravelAmericaPage.vue

<template>
  <div>
    <p>Alligators can be found in the American states of Louisiana and Florida.</p>
  </div>
</template>

<script>
  export default {
    name: &#39;TravelAmericaPage&#39;
  }
</script>

<style scoped>
</style>

TravelChinaPage.vue

<template>
  <div>
    <p>Alligators can be found in China&#39;s Yangtze River Valley.</p>
  </div>
</template>

<script>
  export default {
    name: &#39;TravelChinaPage&#39;
  }
</script>

<style scoped>

</style>

Configurer les itinéraires imbriqués

Maintenant, mettons à jour main.js et TravelPage.vue pour utiliser children pour référencer ces itinéraires imbriqués. main.js doit être mis à jour pour avoir la définition suivante pour la constante routes :

const routes = [
  {
    path: '/travel', component: TravelPage,
    children: [
      { path: '/travel/america', component: TravelAmericaPage },
      { path: '/travel/china', component: TravelChinaPage}
    ]
  },
  {
    path: '/about', component: AboutPage
  }
];

Notez que l'imbrication des enfants peut continuer indéfiniment.

et TravelPage.vue peuvent être écrits via :

TravelPage.vue

<template>
  <div id="travel">
    <h2 class="row1">Travels</h2>
    <div class="flex-container row2">
      <router-link to="/travel/america">America</router-link>
      <router-link to="/travel/china">China</router-link>
    </div>
    <router-view class="row3"></router-view>
  </div>
</template>

<script>
  export default {
    name: &#39;TravelPage&#39;
  }
</script>

<style scoped>
div {
  text-align: center;
}

#travel {
  display: grid;
  grid-template-rows: 20% 40% 40%;
}

.flex-container {
  display: flex;
  justify-content: space-around;
}
</style>

Checkoutlocalhost:8080 et vous verrez la page Voyages Contient 2 sous-pages ! Lorsque vous cliquez sur un lien, notre URL sera mise à jour en conséquence.

Résumé

J'espère que ce tutoriel vous a été utile pour comprendre comment utiliser le routage imbriqué !

Autre remarque sur ce sujet : nous pouvons définir des itinéraires en utilisant des segments dynamiques, tels que path:'/location/:id'. Ensuite, sur les vues de ces itinéraires, vous pouvez référencer cet identifiant comme this.$route.params. Cette fonctionnalité est utile lorsque vous souhaitez afficher des types de données plus spécifiques (utilisateurs, images, etc.) sur des sites Web et des applications.

Adresse originale en anglais : https://alligator.io/vuejs/nested-routes/

Adresse de traduction : https://segmentfault.com/a/1190000021930656

Recommandations associées :

Résumé des questions d'entretien Front-end Vue 2020 (avec réponses)

tutoriel vue Recommandé : Les 5 dernières sélections de didacticiels vidéo vue.js en 2020

Pour plus de connaissances liées à la programmation, veuillez visiter : Introduction à la programmation ! !

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!