Comment ajouter des paramètres globaux devant les routes dans vue

Dans Vue, nous utilisons généralement le routage pour basculer et passer d'une page à l'autre. Dans certains cas particuliers, nous pouvons avoir besoin d'ajouter des paramètres globaux à toutes les routes pour faciliter le transfert de données ou le contrôle entre différentes pages. Cet article explique comment ajouter des paramètres globaux devant les routes de Vue.

1. Pourquoi devons-nous ajouter des paramètres globaux devant les routes

Dans les applications Vue, nous utilisons généralement le routage pour sauter et basculer entre les pages. Le routage peut contrôler l'affichage et le comportement de la page en passant des paramètres. Mais dans certains cas, nous devrons peut-être ajouter des paramètres globaux à toutes les routes pour faciliter le transfert de données et de statuts entre différentes pages, ou pour contrôler le comportement de la page, comme le mode sombre, etc. A ce stade, nous devons ajouter des paramètres globaux devant la route.

2. Comment ajouter des paramètres globaux devant le routage de Vue

Dans le routage de Vue, on peut ajouter des paramètres globaux devant la route en définissant une pré-garde globale sur l'objet routeur. La protection globale du prépend est une fonction qui sera exécutée avant le changement de routage. Nous pouvons obtenir les paramètres de routage dans cette fonction, leur ajouter des paramètres globaux, puis renvoyer les nouveaux paramètres de routage.

Les étapes spécifiques de mise en œuvre sont les suivantes :

1. Dans le fichier index.js sous le répertoire du routeur du projet Vue, définissez une garde frontale globale.

// router/index.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
    routes: [
        //路由配置
    ]
})

router.beforeEach((to, from, next) => {
    //定义全局参数
    const globalParams = {
        title: 'Vue全局参数',
        mode: 'dark'
    };
    //合并路由参数和全局参数
    const params = Object.assign({}, to.params, globalParams);
    next({ path: to.path, params });
});

export default router;

Dans le code ci-dessus, nous définissons une protection frontale globale pour le routeur. Cette fonction sera exécutée avant chaque changement de route. Dans cette fonction, nous définissons les paramètres globaux puis les fusionnons avec les paramètres de routage en tant que nouveaux paramètres de routage pour le changement de page.

2. Accédez aux paramètres globaux dans chaque composant

Dans le code ci-dessus, nous avons défini les paramètres globaux et les avons fusionnés avec les paramètres de routage avant d'effectuer le changement d'itinéraire. Alors comment accéder à ces paramètres globaux dans chaque composant ? C'est en fait très simple, il suffit de définir ces paramètres dans les props ou les données du composant. Par exemple :

// PageA.vue

<template>
  <div>
    <h1>{{title}}</h1>
    <p>{{mode}}</p>
  </div>
</template>

<script>
export default {
  props: ['title', 'mode'], //在props中定义全局参数
  //组件逻辑代码
}
</script>

Dans l'exemple ci-dessus, nous avons défini les paramètres globaux title et mode dans les accessoires du composant, afin que ces paramètres soient accessibles via this.title et this.mode lors du rendu de la page.

3. Résumé

Dans Vue, l'ajout de paramètres globaux à toutes les routes peut faciliter le transfert et le contrôle de nos données entre pages et de notre statut. Nous pouvons définir des pré-gardes globales, ajouter des paramètres globaux avant le changement de routage, puis accéder à ces paramètres via des accessoires ou des données dans chaque composant. Cette technique nous permet de mieux contrôler l'état et le comportement des applications Vue, améliorant ainsi l'efficacité du développement et l'expérience utilisateur.

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!