Comment utiliser le routage pour encapsuler des composants publics dans un projet Vue ?

Comment utiliser le routage pour encapsuler des composants publics dans un projet Vue

Au cours du processus de développement d'un projet Vue, nous rencontrons souvent des situations où le même composant doit être utilisé sur plusieurs pages. Afin d'éviter d'écrire du code similaire à plusieurs reprises, nous pouvons encapsuler ces composants communs et les utiliser dans différentes pages via le routage.

Ci-dessous, nous utilisons un exemple simple pour illustrer comment utiliser le routage pour encapsuler des composants publics dans un projet Vue. Disons que nous avons un projet avec deux pages : Home.vue et About.vue. Les deux pages doivent utiliser un composant public nommé UserInfo.vue pour afficher les informations utilisateur.

Tout d'abord, créez un dossier nommé composants dans le projet. Créez un fichier nommé UserInfo.vue dans ce dossier pour stocker le code du composant public.

Le code de UserInfo.vue est le suivant :

<template>
  <div>
    <h2>User Info</h2>
    <p>Name: {{ user.name }}</p>
    <p>Age: {{ user.age }}</p>
  </div>
</template>

<script>
export default {
  name: 'UserInfo',
  data() {
    return {
      user: {
        name: 'John',
        age: 25,
      },
    }
  },
}
</script>

Ensuite, créez un dossier nommé router sous le dossier src du projet. Créez un fichier nommé index.js dans ce dossier pour configurer les informations de routage.

Le code d'index.js est le suivant :

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: About,
  },
]

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

export default router

Ensuite, introduisez et utilisez le composant public UserInfo.vue dans les fichiers Home.vue et About.vue respectivement. Le code de

Home.vue est le suivant :

<template>
  <div>
    <h1>Home Page</h1>
    <UserInfo />
  </div>
</template>

<script>
import UserInfo from '@/components/UserInfo.vue'

export default {
  name: 'Home',
  components: {
    UserInfo,
  },
}
</script>

Le code de About.vue est le suivant :

<template>
  <div>
    <h1>About Page</h1>
    <UserInfo />
  </div>
</template>

<script>
import UserInfo from '@/components/UserInfo.vue'

export default {
  name: 'About',
  components: {
    UserInfo,
  },
}
</script>

Enfin, modifiez le fichier App.vue du projet et imbriquez la balise vue-router router-view dans la position appropriée, utilisée pour afficher la vue correspondante en fonction de l'itinéraire.

Le code d'App.vue est le suivant :

<template>
  <div id="app">
    <router-view />
  </div>
</template>

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

À ce stade, nous avons réussi à encapsuler un composant public dans le projet Vue, puis à l'utiliser dans différentes pages via le routage. De cette façon, nous pouvons gagner du temps et du code et améliorer l’efficacité du développement du projet.

Il convient de noter que lorsque vous utilisez le routage pour encapsuler des composants publics, vous devez vous assurer que vue-router a été correctement installé et configuré, et qu'il est correctement introduit et enregistré dans la page qui nécessite l'utilisation de composants publics.

Ce qui précède explique comment utiliser le routage pour encapsuler des composants publics dans le projet Vue. J'espère que cela sera utile à tout le monde.

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!