vue remplace la nouvelle route

Avec le développement de Vue, de plus en plus d'applications Web choisissent d'utiliser Vue comme framework front-end. Au fur et à mesure que l'application se développe et est mise à jour, nous devons constamment ajouter de nouveaux itinéraires et remplacer les anciens. Alors comment remplacer le routage dans Vue ?

Dans Vue, notre bibliothèque de routage couramment utilisée est Vue Router. Vue Router est le gestionnaire de routage officiellement fourni par Vue.js, qui peut facilement réaliser le contrôle de routage de SPA (Single Page Application). Lors de l'utilisation de Vue Router, nous devons maîtriser les trois concepts importants suivants :

1. Router
   Router est une instance de Vue Router, qui est responsable de la création de Vue Router. Lors de la définition d'un itinéraire, vous devez créer une instance à l'aide d'un nouveau routeur (options). Dans Vue, nous écrivons généralement l'instance de routeur séparément dans un fichier router.js, puis nous l'introduisons et la montons sur l'instance de Vue dans main.js.
2. Routes
   Routes est un tableau, où chaque Route correspond à un chemin URL et un composant. Lorsque l'URL correspond à l'itinéraire, le composant correspondant sera rendu dans la balise Chaque objet Route doit contenir au moins deux propriétés : chemin et composant.
3. Router-view
   Router-view est un composant fourni par Vue Router, qui est utilisé pour restituer le composant correspondant. Dans App.vue, nous devons ajouter la balise pour héberger le composant Component correspondant.

Ensuite, nous montrerons comment remplacer les routes dans Vue Router. Tout d'abord, supposons que notre application se compose de trois pages : la page d'accueil (Home), la page de détails de l'utilisateur (UserDetail) et la page à propos de nous (AboutUs). Maintenant, nous devons remplacer la page de détails de l'utilisateur par la page de liste d'utilisateurs (UserList) et remplacer les routes correspondantes.

Dans la première étape, nous devons modifier la route correspondante dans le fichier router.js :

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/views/Home.vue';
import UserList from '@/views/UserList.vue';
import AboutUs from '@/views/AboutUs.vue';

Vue.use(Router);

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home,
  },
  {
    path: '/userList',
    name: 'userList',
    component: UserList,
  },
  {
    path: '/aboutUs',
    name: 'aboutUs',
    component: AboutUs,
  },
];

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

export default router;

Ici, nous remplaçons le composant UserDetail par le composant UserList et modifions le chemin correspondant. A noter qu'après avoir modifié la configuration du routage, il faut redémarrer l'application Vue pour que la modification prenne effet.

Dans la deuxième étape, nous devons utiliser la balise router-link dans le composant Vue pour effectuer des sauts de routage. Dans notre application, nous devons ajouter un lien vers la liste des utilisateurs sur la page d'accueil afin que les utilisateurs puissent accéder directement à la page de la liste des utilisateurs.

Modifiez la page Home.vue, ajoutez une balise router-link et définissez l'attribut to correspondant :

<template>
  <div>
    <h1>欢迎访问我的应用</h1>
    <router-link to="/userList">用户列表</router-link>
    <router-link to="/aboutUs">关于我们</router-link>
  </div>
</template>

<script>
export default {};
</script>

Ici, nous définissons l'attribut to sur "/userList", ce qui signifie que l'utilisateur accédera à la liste des utilisateurs page après avoir cliqué sur le lien.

Dans la troisième étape, nous devons ajouter une logique métier pertinente au composant UserList.vue. Ici, nous supposons que les informations de la liste d'utilisateurs sont affichées dans le composant UserList :

<template>
  <div>
    <h1>用户列表</h1>
    <ul>
      <li v-for="(user, index) in userList" :key="index">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userList: [
        {
          name: '小明',
          age: 20,
          gender: '男',
        },
        {
          name: '小红',
          age: 21,
          gender: '女',
        },
        {
          name: '小华',
          age: 22,
          gender: '男',
        },
      ],
    };
  },
};
</script>

Ici, nous utilisons la directive v-for pour restituer chaque objet utilisateur de la userList en un élément li.

Grâce aux étapes ci-dessus, nous avons remplacé avec succès la page de détails de l'utilisateur par la page de liste des utilisateurs et ajouté le lien correspondant à la page d'accueil. Dans le développement réel, nous devons raisonnablement concevoir et remplacer les itinéraires en fonction des besoins spécifiques de l'entreprise, tout en prêtant attention aux concepts associés et à l'utilisation de Vue Router pour garantir le fonctionnement normal de l'application.

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!