So fügen Sie globale Parameter vor Routen in Vue hinzu

In Vue verwenden wir normalerweise Routing, um zwischen Seiten zu wechseln und zu springen. In einigen Sonderfällen müssen wir möglicherweise einige globale Parameter zu allen Routen hinzufügen, um die Datenübertragung oder die Steuerung zwischen verschiedenen Seiten zu erleichtern. In diesem Artikel wird erläutert, wie globale Parameter vor den Routen von Vue hinzugefügt werden.

1. Warum müssen wir globale Parameter vor Routen hinzufügen? In Vue-Anwendungen verwenden wir normalerweise Routing, um zwischen Seiten zu springen und zu wechseln. Routing kann die Anzeige und das Verhalten der Seite durch die Übergabe von Parametern steuern. In einigen Fällen müssen wir jedoch möglicherweise einige globale Parameter zu allen Routen hinzufügen, um die Übertragung von Daten und Status zwischen verschiedenen Seiten zu erleichtern oder um das Verhalten der Seite zu steuern, z. B. den Dunkelmodus usw. Zu diesem Zeitpunkt müssen wir vor der Route globale Parameter hinzufügen.

2. So fügen Sie globale Parameter vor dem Routing von Vue hinzu

Im Routing von Vue können wir globale Parameter vor dem Routing hinzufügen, indem wir einen globalen Vorschutz für das Router-Objekt definieren. Der globale Prepend Guard ist eine Funktion, die ausgeführt wird, bevor das Routing umgeschaltet wird. Wir können die Routing-Parameter in dieser Funktion abrufen, ihnen globale Parameter hinzufügen und dann die neuen Routing-Parameter zurückgeben.

Die spezifischen Implementierungsschritte sind wie folgt:

1 Definieren Sie in der Datei index.js im Router-Verzeichnis des Vue-Projekts einen globalen Frontschutz.

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

Im obigen Code definieren wir einen globalen Frontschutz für den Router. Diese Funktion wird vor jedem Routenwechsel ausgeführt. In dieser Funktion definieren wir globale Parameter und führen sie dann mit Routing-Parametern als neue Routing-Parameter für den Seitenwechsel zusammen.

2. Greifen Sie in jeder Komponente auf globale Parameter zu

Im obigen Code haben wir die globalen Parameter definiert und sie mit den Routing-Parametern zusammengeführt, bevor wir die Routenumschaltung durchführen. Wie greifen Sie also auf diese globalen Parameter in den einzelnen Komponenten zu? Eigentlich ist es ganz einfach, wir müssen diese Parameter nur in den Requisiten oder Daten der Komponente definieren. Zum Beispiel:

// PageA.vue

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

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

Im obigen Beispiel haben wir die globalen Parameter Titel und Modus in den Requisiten der Komponente definiert, sodass beim Rendern der Seite über this.title und this.mode auf diese Parameter zugegriffen werden kann.

3. Zusammenfassung

In Vue kann das Hinzufügen globaler Parameter zu allen Routen die seitenübergreifende Übertragung und Steuerung von Daten und Status erleichtern. Wir können globale Frontwächter definieren, vor dem Routing-Switching globale Parameter hinzufügen und dann über Requisiten oder Daten in jeder Komponente auf diese Parameter zugreifen. Mit dieser Technik können wir den Status und das Verhalten von Vue-Anwendungen besser steuern und so die Entwicklungseffizienz und das Benutzererlebnis verbessern.

Das obige ist der detaillierte Inhalt vonSo fügen Sie globale Parameter vor Routen in Vue hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!