Comment utiliser Vue Router pour implémenter l'imbrication et la correspondance de routage à plusieurs niveaux ?

Comment utiliser Vue Router pour implémenter l'imbrication et la correspondance d'itinéraires à plusieurs niveaux ?

Vue Router est le gestionnaire de routage officiel de Vue.js, qui peut nous aider à implémenter des fonctions de routage dans les applications à page unique (SPA). Dans Vue Router, nous pouvons définir diverses règles de routage en configurant la table de routage et en implémentant le saut et la correspondance d'itinéraire. Dans cet article, nous nous concentrerons sur la façon d'utiliser Vue Router pour implémenter l'imbrication et la correspondance de routes à plusieurs niveaux.

1. Installer Vue Router

Tout d'abord, nous devons installer Vue Router dans le projet. Vous pouvez utiliser la commande npm ou Yarn pour installer Vue Router.

npm install vue-router

ou

yarn add vue-router

2. Créer une instance de routage

Dans le projet Vue, nous devons créer une instance de routage et l'associer à l'instance racine de Vue. Avant de créer une instance de routage, nous devons d'abord créer une table de routage pour définir diverses règles de routage. La table de routage est un tableau composé d'objets de configuration de routage. Chaque objet de configuration de routage contient le chemin de routage et les composants correspondants.

Supposons que notre projet ait la structure imbriquée de routage multi-niveaux suivante :

- Home
  - About
    - Contact
  - News
    - Detail

Nous pouvons définir les règles de routage suivantes dans la table de routage :

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 News from '@/components/News.vue'
import Detail from '@/components/Detail.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About,
    children: [
      {
        path: 'contact',
        name: 'Contact',
        component: Contact
      }
    ]
  },
  {
    path: '/news',
    name: 'News',
    component: News,
    children: [
      {
        path: 'detail',
        name: 'Detail',
        component: Detail
      }
    ]
  }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

Dans la table de routage ci-dessus, nous avons défini les règles de routage suivantes :

• Le composant correspondant au chemin de / est Home.vue/路径对应的组件是Home.vue
• /about路径对应的组件是About.vue
• /about/contact路径对应的组件是Contact.vue
• /news路径对应的组件是News.vue
• /news/detail路径对应的组件是Detail.vue

3. 配置根组件

在我们的Vue根实例中，我们需要将我们创建的路由实例与Vue的根实例关联起来，并将我们的路由组件渲染到Vue根实例中的<router-view>标签中。

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

Vue.config.productionTip = false

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

在上述代码中，我们将我们创建的路由实例通过router选项注入到Vue根实例中，并通过$mount('#app')方法将Vue根实例挂载到id为app的DOM节点上。

4. 使用<router-link>和<router-view>组件

在我们的Vue组件中，我们可以使用<router-link>组件来实现路由之间的跳转，使用<router-view>组件来渲染对应的路由组件。

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-link to="/about/contact">Contact</router-link>
    <router-link to="/news">News</router-link>
    <router-link to="/news/detail">Detail</router-link>
    <hr>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

在上述代码中，我们通过<router-link>组件定义了多个路由跳转链接，分别跳转到对应的路径。在<router-view>标签中，我们通过Vue Router来动态渲染对应的路由组件。

使用以上步骤，我们就可以在Vue项目中实现多级路由的嵌套和匹配。当我们点击不同的路由链接时，页面将会渲染对应的路由组件，实现页面的动态切换和嵌套。

总结

本文介绍了如何使用Vue Router来实现多级路由的嵌套和匹配。通过创建路由表，并在Vue根实例中关联路由实例，我们可以在Vue项目中定义多级路由规则，并实现路由之间的跳转和匹配。同时，我们还介绍了在Vue组件中如何使用<router-link>和<router-view>

Le composant correspondant au chemin de /about est About.vue

/about/contact Le composant correspondant au chemin est Contact.vue

• /newsLe composant correspondant au chemin est News.vue

/news/detailLe composant correspondant au chemin est Detail.vue🎜🎜

🎜Configurer le composant racine🎜🎜🎜Dans notre instance racine Vue, nous devons associer l'instance de routage que nous avons créée à l'instance racine Vue et restituer notre routage à l'instance racine de Vue dans la balise <router-view>. 🎜rrreee🎜Dans le code ci-dessus, nous injectons l'instance de routage que nous avons créée dans l'instance racine de Vue via l'option routeur, et montons l'instance racine de Vue via la méthode $mount('#app') le nœud DOM dont l'identifiant est app. 🎜
🎜Utilisation des composants <router-link> et <router-view> 🎜🎜🎜Dans notre composant Vue, nous vous peut utiliser le composant <router-link> pour implémenter des sauts entre les routes, et utiliser le composant <router-view> pour restituer le composant de routage correspondant. 🎜rrreee🎜Dans le code ci-dessus, nous définissons plusieurs liens de saut de routage via le composant <router-link> pour accéder respectivement aux chemins correspondants. Dans la balise <router-view>, nous utilisons Vue Router pour restituer dynamiquement le composant de routage correspondant. 🎜🎜En utilisant les étapes ci-dessus, nous pouvons implémenter l'imbrication et la correspondance de routage à plusieurs niveaux dans le projet Vue. Lorsque nous cliquons sur différents liens de routage, la page affichera les composants de routage correspondants pour réaliser une commutation dynamique et une imbrication de la page. 🎜🎜Résumé🎜🎜Cet article explique comment utiliser Vue Router pour implémenter l'imbrication et la correspondance de routage à plusieurs niveaux. En créant une table de routage et en associant des instances de routage dans l'instance racine de Vue, nous pouvons définir des règles de routage à plusieurs niveaux dans le projet Vue et implémenter des sauts et des correspondances entre les routes. Dans le même temps, nous avons également présenté comment utiliser les composants <router-link> et <router-view> dans les composants Vue pour implémenter les liens de routage et le rendu des composants de routage. . J'espère que cet article vous sera utile lorsque vous utiliserez Vue Router pour implémenter l'imbrication et la correspondance de routage à plusieurs niveaux. 🎜🎜Références🎜🎜🎜Documentation officielle de Vue Router : https://router.vuejs.org/🎜🎜

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!