Comment configurer le sous-routage vue

Vue est un framework JavaScript populaire pour créer des applications Web interactives. La fonction de routage de Vue nous permet de créer une application à page unique (SPA). Différentes routes correspondent à différents composants, puis le contenu spécifié est rendu dans le composant. Les sous-routes sont un type spécial de routage dans le routage Vue qui peut être imbriqué dans d'autres routes. Cet article explique comment configurer les sous-routes dans Vue.

Tout d'abord, nous devons nous assurer que Vue et ses dépendances associées ont été installées. Il est préférable de créer un nouveau projet à l'aide de Vue CLI. Ensuite, nous devons créer le composant Vue et définir les routes.

Définissez la route parent
Définissez la route dans le composant parent (généralement la route racine /) pour fournir un conteneur pour le composant enfant.

// src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

Définissez les routes enfants
Ensuite, créez une route pointant vers le composant enfant dans le composant parent.

// src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue'),
    children: [
      {
        path: 'about',
        name: 'About',
        component: () => import('../views/About.vue')
      }
    ]
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

Dans cet exemple, "/" est la route racine, qui pointe vers le composant Home. Nous avons créé une sous-route pour le composant Home sous le nom "/about", qui pointe vers le composant About.

Ajouter un conteneur de composant enfant dans le modèle de composant parent
Dans le modèle du composant Home, nous devons ajouter un conteneur d'espace réservé pour restituer le composant enfant.

<template>
  <div>
    <h1>Home</h1>
    <router-view></router-view>
  </div>
</template>

Cette directive "router-view" est un conteneur de composants enfants qui affichera le composant spécifié via la route enfant.

Ajouter du contenu dans le modèle du composant enfant
Dans le modèle du composant À propos, nous pouvons ajouter du contenu pour montrer de quoi il s'agit.

<template>
  <div>
    <h1>About</h1>
    <p>This is an about page.</p>
  </div>
</template>

Maintenant, nous avons configuré avec succès un sous-routeur Vue. Testez-le pour voir s'il s'affiche correctement.

Résumé
Il y a trois étapes de base pour configurer le sous-routage de Vue. Ces étapes comprennent :

Définir la route parent : déclarez le composant parent dans la route racine et parcourez son itinéraire vers ce composant.

Définir un sous-itinéraire : créez des points de routage pour les sous-composants dans le composant parent.

Ajouter un conteneur de composants enfants dans le modèle de composant parent : insérez des composants enfants dans des éléments d'espace réservé.

Ajouter du contenu dans le modèle de composant enfant : fournissez du contenu aux composants enfants pour présenter leurs fonctionnalités.

Dernier rappel, lorsque vous utilisez le sous-routage dans Vue, vous devez garder le chemin correct. Le chemin doit commencer à partir du composant parent, en commençant par une barre oblique (/).

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!