Comment le routage imbriqué est-il implémenté dans Vue Router ?

Comment le routage imbriqué est-il implémenté dans Vue Router ?

Vue.js est un framework JavaScript populaire pour créer des interfaces utilisateur. Vue Router est un plug-in officiel pour Vue.js, utilisé pour créer un système de routage pour les applications monopage. Vue Router fournit un moyen simple et flexible de gérer la navigation entre les différentes pages et composants de votre application.

Le routage imbriqué est une fonctionnalité très utile de Vue Router, qui peut facilement gérer des structures de pages complexes. Grâce au routage imbriqué, nous pouvons définir plusieurs routes enfants sous une route parent pour implémenter la structure hiérarchique de la page. Dans cet article, nous apprendrons comment utiliser le routage imbriqué dans Vue Router.

1. Tout d'abord, nous devons créer une application Vue.js et introduire Vue Router. Nous pouvons utiliser Vue CLI pour créer un nouveau projet Vue.js ou ajouter manuellement Vue Router à un projet existant.
2. Ensuite, nous devons configurer Vue Router. Dans le fichier de configuration de Vue Router, on peut définir différentes routes et les composants correspondant à chaque route. Dans ce fichier de configuration, nous pouvons utiliser le champ children pour définir les routes enfants. Par exemple : children字段来定义子级路由。例如：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'
import Contact from './components/Contact.vue'
import Products from './components/Products.vue'
import ProductDetail from './components/ProductDetail.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About
  },
  {
    path: '/contact',
    component: Contact
  },
  {
    path: '/products',
    component: Products,
    children: [
      {
        path: ':id',
        component: ProductDetail
      }
    ]
  }
]

const router = new VueRouter({
  routes
})

export default router

在上面的代码中，我们定义了一个父级路由/products，以及一个子级路由:id。子级路由:id使用了动态路由参数，可以匹配不同的产品详情页面。

3. 在应用程序的入口文件（通常是main.js）中，我们需要将Vue Router添加到Vue实例中。例如：

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

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

4. 现在我们可以在组件中使用嵌套路由了。我们可以在父级组件中使用975b587bf85a482ea10b0a28848e78a4来展示当前路由对应的组件，并在子级组件中使用975b587bf85a482ea10b0a28848e78a4来展示子级路由对应的组件。

在上述示例中，我们可以创建一个Products组件用于展示产品列表，以及一个ProductDetail组件用于展示单个产品的详细信息。在父级组件Products的模板中，我们可以添加975b587bf85a482ea10b0a28848e78a4来展示子级路由对应的组件。例如：

<template>
  <div>
    <h2>Products</h2>
    <ul>
      <li v-for="product in products" :key="product.id">
        <router-link :to="'/products/' + product.id">{{ product.name }}</router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

在子级组件ProductDetail中，我们可以使用$route.params

<template>
  <div>
    <h3>{{ product.name }}</h3>
    <p>{{ product.description }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      product: {}
    }
  },
  created() {
    const productId = this.$route.params.id
    // 根据productId从后端获取数据，并将数据赋值给product
    // ...
  }
}
</script>

Dans le code ci-dessus, nous définissons une route parent /products, et une route enfant :id. Le routage enfant :id utilise des paramètres de routage dynamique pour correspondre à différentes pages de détails du produit.

Dans le fichier d'entrée de l'application (généralement main.js), nous devons ajouter le Vue Router à l'instance Vue. Par exemple :

rrreee

Nous pouvons désormais utiliser le routage imbriqué dans les composants. Nous pouvons utiliser 975b587bf85a482ea10b0a28848e78a4 dans le composant parent pour afficher le composant correspondant à l'itinéraire actuel, et utiliser 975b587bf85a482ea10b0a28848e78a4 dans le composant enfant pour Affichez les composants correspondant aux routes enfants.

🎜Dans l'exemple ci-dessus, nous pouvons créer un composant Products pour afficher la liste des produits, et un composant ProductDetail pour afficher les informations détaillées d'un seul produit. . Dans le modèle du composant parent Products, nous pouvons ajouter 975b587bf85a482ea10b0a28848e78a4 pour afficher les composants correspondant à la route enfant. Par exemple : 🎜rrreee🎜Dans le composant enfant ProductDetail, nous pouvons utiliser $route.params pour obtenir des paramètres de routage dynamique. Par exemple : 🎜rrreee🎜Grâce aux étapes ci-dessus, nous pouvons utiliser le routage imbriqué dans Vue Router. Le routage parent peut être utilisé pour afficher les composants parents, et il peut également contenir un routage enfant pour afficher les composants enfants. À l'aide de paramètres de routage dynamique, nous pouvons afficher différents contenus dans les composants enfants en fonction de différents paramètres. 🎜🎜Résumé : 🎜Le routage imbriqué est une fonctionnalité très utile dans Vue Router, qui peut nous aider à créer des structures de pages complexes. Dans cet article, nous présentons brièvement l'utilisation du routage imbriqué dans Vue Router et donnons des exemples de code. J'espère qu'en étudiant cet article, les lecteurs pourront maîtriser l'utilisation de base du routage imbriqué dans Vue Router, afin de mieux l'appliquer à leurs propres projets Vue.js. 🎜

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!