Comment utiliser le routage dans Vue pour afficher et masquer dynamiquement les éléments de la page ?

Vue est un framework frontal populaire qui offre un moyen élégant de créer des interfaces utilisateur. Le routage Vue est une fonctionnalité importante du framework Vue. Il nous permet de sauter et de naviguer entre les pages en modifiant l'URL dans une application d'une seule page. En plus de cette fonction de base, le routage Vue peut également être utilisé pour afficher et masquer dynamiquement des éléments de page. Cet article expliquera comment utiliser le routage Vue pour réaliser cette fonction.

Tout d'abord, nous devons installer le routage Vue. Vous pouvez utiliser la commande npm pour l'installer :

npm install vue-router

Une fois l'installation terminée, nous pouvons importer le routage Vue et les composants associés dans le fichier d'entrée du projet Vue (généralement main.js) :

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

Vue.use(VueRouter);

Ensuite, nous devons définir les composants de routage et de correspondance. Dans le répertoire racine du projet Vue, créez un nouveau dossier de routeur et créez un fichier index.js sous le dossier. Définissez les routes et les composants correspondants dans le fichier index.js. L'exemple est le suivant :

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

Vue.use(VueRouter);

const routes = [
  {
    path: '/home',
    component: () => import('@/components/Home.vue'),
  },
  {
    path: '/about',
    component: () => import('@/components/About.vue'),
  },
  {
    path: '/contact',
    component: () => import('@/components/Contact.vue'),
  },
];

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

export default router;

Dans l'exemple de code ci-dessus, nous avons défini trois routes : /home, /about et /contact, qui correspondent respectivement aux trois composants Home. vue, About.vue et Contact.vue. Ensuite, nous devons introduire le routage dans l'instance Vue :

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

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

Dans le code ci-dessus, nous ajoutons l'instance de routeur à l'instance Vue et rendons le composant App.vue dans la fonction de rendu.

Maintenant, nous avons terminé la configuration du routage. Ensuite, nous pouvons utiliser le routage dans le composant pour afficher et masquer dynamiquement les éléments de la page.

Dans les composants, on peut utiliser la balise pour afficher les composants correspondant à l'itinéraire. Il détermine quel composant afficher en fonction du chemin dans l'URL actuelle. Un exemple est le suivant :

<template>
  <div>
    <h1>My App</h1>

    <router-link to="/home">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-link to="/contact">Contact</router-link>

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

Dans le code ci-dessus, nous utilisons la balise pour créer des liens de navigation, chaque lien correspondant à un itinéraire. Lorsque nous cliquons sur le lien, le chemin dans l'URL changera et la balise affichera le composant correspondant.

De plus, nous pouvons également utiliser l'objet $route dans le composant pour contrôler l'affichage et le masquage du composant en fonction du chemin de l'URL actuelle. Un exemple est le suivant :

<template>
  <div>
    <h1 v-if="$route.path === '/home'">Home</h1>
    <h1 v-if="$route.path === '/about'">About</h1>
    <h1 v-if="$route.path === '/contact'">Contact</h1>
  </div>
</template>

Dans le code ci-dessus, nous utilisons la directive v-if pour déterminer s'il faut afficher la balise

correspondante en fonction du chemin de l'URL actuelle.

Grâce à l'exemple de code ci-dessus, nous pouvons voir comment utiliser le routage Vue pour afficher et masquer dynamiquement les éléments de la page. En contrôlant le chemin de l'URL, nous pouvons sauter et naviguer entre différentes pages, et contrôler l'affichage et le masquage des composants en fonction du chemin de l'URL actuelle. Cela nous offre une grande commodité pour développer des interfaces frontales flexibles.

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!