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. 现在我们可以在组件中使用嵌套路由了。我们可以在父级组件中使用<router-view>来展示当前路由对应的组件，并在子级组件中使用<router-view>来展示子级路由对应的组件。

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

<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 fichier d'entrée de l'application (généralement main.js), nous devons ajouter le Vue Router à l'instance Vue. Par exemple :

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

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!