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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Libérer： 2023-07-21 15:39:15

original

3008 Les gens l'ont consulté

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

Copier après la connexion

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);

Copier après la connexion

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;

Copier après la connexion

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');

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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