Comment utiliser Vue-Router pour implémenter le routage imbriqué dans l'application Vue ?

Comment utiliser Vue-Router pour implémenter le routage imbriqué dans l'application Vue ?

Vue-Router est le gestionnaire de routage officiel de Vue.js, qui peut nous aider à implémenter facilement des fonctions de routage dans des applications monopage. Dans le développement de projets réels, nous rencontrons souvent des scénarios qui nécessitent un routage imbriqué. Par exemple, dans un système de gestion des utilisateurs, en plus de la page d'accueil, il existe également des sous-pages telles que la liste des utilisateurs, les détails des utilisateurs, etc. Cet article expliquera comment utiliser Vue-Router pour implémenter le routage imbriqué dans les applications Vue et fournira des exemples de code spécifiques.

Tout d'abord, nous devons installer Vue-Router. Vous pouvez utiliser npm ou Yarn pour installer les dépendances de Vue-Router :

npm install vue-router
# 或者
yarn add vue-router

Après l'installation, nous devons importer Vue-Router dans le fichier d'entrée de l'application Vue et l'enregistrer en utilisant la méthode Vue.use() :

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

Vue.use(VueRouter)

Ensuite , Nous pouvons créer une instance de routage et configurer le routage :

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

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/users',
    component: Users,
    children: [
      {
        path: ':id',
        component: UserDetails
      }
    ]
  }
]

const router = new VueRouter({
  routes
})

export default router

Dans le code ci-dessus, nous définissons deux routes, l'une est la route racine "/", le composant correspondant est Home, l'autre est la route utilisateur "/users" ; , Le composant correspondant est Utilisateurs. Dans le routage utilisateur, nous définissons une sous-route ":id", et le composant correspondant est UserDetails.

Ensuite, nous devons utiliser l'instance de routeur dans l'instance Vue :

import Vue from 'vue'
import App from './App.vue'
import router from './router' // 导入路由实例

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

Nous avons maintenant terminé la configuration de base de Vue-Router. Ensuite, nous pouvons créer respectivement les composants Home, Users et UserDetails et restituer les composants dans les routes correspondantes.

Tout d'abord, créons le composant Home :

<template>
  <div>
    <h1 id="Home">Home</h1>
  </div>
</template>

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

Ensuite, créons le composant Users et affichons la liste des utilisateurs et le lien vers les détails de l'utilisateur dans ce composant :

<template>
  <div>
    <h1 id="Users">Users</h1>
    <ul>
      <li v-for="user in users" :key="user.id">
        <router-link :to="'/users/' + user.id">{{ user.name }}</router-link>
      </li>
    </ul>
    <router-view></router-view> <!--显示子路由组件-->
  </div>
</template>

<script>
export default {
  name: 'Users',
  data() {
    return {
      users: [
        { id: 1, name: 'User 1' },
        { id: 2, name: 'User 2' },
        { id: 3, name: 'User 3' }
      ]
    }
  }
}
</script>

Enfin, nous créons le composant UserDetails pour afficher les détails des utilisateurs :

<template>
  <div>
    <h2 id="User-Details">User Details</h2>
    <p>ID: {{ $route.params.id }}</p>
    <p>Name: {{ user.name }}</p>
  </div>
</template>

<script>
export default {
  name: 'UserDetails',
  computed: {
    user() {
      const userId = parseInt(this.$route.params.id)
      return this.users.find(user => user.id === userId)
    }
  },
  data() {
    return {
      users: [
        { id: 1, name: 'User 1' },
        { id: 2, name: 'User 2' },
        { id: 3, name: 'User 3' }
      ]
    }
  }
}
</script>

Dans le code ci-dessus, nous utilisons $route.params.id pour obtenir les paramètres dynamiques de l'itinéraire et obtenir les informations utilisateur correspondantes en fonction de ce paramètre.

Maintenant, nous avons terminé la configuration du routage imbriqué de Vue-Router et la création des composants. Accédez à l'application dans un navigateur et vous verrez une page d'accueil et un lien de navigation vers une liste d'utilisateurs. Cliquez sur le lien "Utilisateurs" et vous verrez une liste d'utilisateurs et pourrez cliquer sur le lien de chaque utilisateur pour afficher les détails de l'utilisateur.

Pour résumer, pour utiliser Vue-Router pour implémenter le routage imbriqué dans une application Vue, nous devons effectuer les étapes suivantes :

1. Installer et importer Vue-Router.
2. Créez une instance de routage et configurez le routage.
3. Utilisez l'instance de routeur dans l'instance Vue.
4. Créez le composant correspondant et restituez le composant dans l'itinéraire requis.
5. Utilisez la balise dans la vue pour afficher les composants de routage enfants.

Avec les étapes ci-dessus, vous pourrez implémenter avec succès la fonction de routage imbriqué dans votre application Vue. Bonne écriture !

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!