Lassen Sie uns darüber sprechen, wie Sie Vue-Routing-Parameter ausblenden

Vue ist ein beliebtes JavaScript-Framework, das häufig für die Front-End-Entwicklung verwendet wird. Vue Router ist das offizielle Routing-Management-Tool, mit dem Entwickler die Routing-Funktion von SPA (Single Page Application) einfach implementieren können. In Vue Router verwenden wir normalerweise Routing-Parameter, um Seiten dynamisch zu wechseln. In einigen spezifischen Szenarien müssen wir jedoch möglicherweise Routing-Parameter verbergen und verschlüsseln. In diesem Artikel erfahren Sie, wie Sie Routing-Parameter in Vue ausblenden.

1. Grundlegende Verwendung von Routing-Parametern

In Vue Router werden Routing-Parameter durch die Verwendung von Doppelpunkt-Präfixen definiert, zum Beispiel:

{ path: '/user/:id', component: User }

In der oben Im Code definieren wir einen Routing-Parameter namens „id“, der die entsprechenden Benutzerinformationen dynamisch anzeigen kann, wenn der Benutzer auf „/user/1“ zugreift. In der Komponente können wir über $route.params auf den Wert des aktuellen Routing-Parameters zugreifen, zum Beispiel:

const User = {
  template: '<div>{{ $route.params.id }}</div>'
}

2. Routing-Parameter ausblenden

In der tatsächlichen Entwicklung gibt es Manchmal möchten wir Routing-Parameter ausblenden, beispielsweise die Verschlüsselung von Benutzer-IDs. Dies kann die Sicherheit des Systems verbessern und verhindern, dass Benutzer durch Manipulation von URL-Parametern auf die Daten anderer Personen zugreifen. Um die Funktion zum Ausblenden von Routing-Parametern zu realisieren, können wir die von Vue Router bereitgestellte Funktion „Path Parameter Rewrite (Rewrite)“ verwenden. Insbesondere können wir den Wert des Routing-Parameters neu definieren, indem wir die Funktion beforeEnter zur Routing-Konfiguration hinzufügen, zum Beispiel:

{ 
  path: '/user/:id', 
  component: User,
  beforeEnter: (to, from, next) => {
    // 将id进行加密
    const id = encrypt(to.params.id)
    next({ path: `/user/${id}` })
  }
}

Im obigen Code definieren wir eine Funktion mit dem Namen „beforeEnter“. aufgerufen, bevor der Benutzer auf die Route zugreift. In dieser Funktion verschlüsseln wir die ursprünglichen Routing-Parameter und ändern den Pfad der Sprungroute über die nächste Funktion auf den verschlüsselten Pfadwert, wodurch die Routing-Parameter ausgeblendet werden.

3. Entschlüsselung von Routing-Parametern

Wenn Routing-Parameter ausgeblendet sind, müssen wir die Routing-Parameter in der Komponente entschlüsseln, um die tatsächlichen Parameterwerte zu erhalten. Um diese Funktion zu erreichen, können wir die Routing-Parameter in der erstellten Lebenszyklusfunktion der Komponente entschlüsseln, zum Beispiel:

const User = {
  template: '<div>{{ realId }}</div>',
  data() {
    return {
      realId: ''
    }
  },
  created() {
    // 获取加密后的id路由参数
    const id = this.$route.params.id
    // 解密id
    this.realId = decrypt(id)
  }
}

Im obigen Code erhalten wir die verschlüsselte Route durch die erstellten Lebenszyklusfunktionsparameter , und wandeln Sie sie über die Entschlüsselungsfunktion decrypt in reale Parameter um und speichern Sie den entschlüsselten Wert in der Instanzvariablen realId der Komponente. In der Vorlage können wir die tatsächlichen Routing-Parameterwerte über die Variable realId anzeigen.

4. Zusammenfassung

Mithilfe der Funktion zum Umschreiben von Pfadparametern können wir Vue-Routing-Parameter einfach ausblenden und entschlüsseln. Diese Technologie kann die Sicherheit des Systems verbessern und unnötige Probleme vermeiden. In der tatsächlichen Entwicklung können wir auch Cookies, Sitzungen und andere Technologien kombinieren, um die Sicherheit des Systems weiter zu verbessern.

Das obige ist der detaillierte Inhalt vonLassen Sie uns darüber sprechen, wie Sie Vue-Routing-Parameter ausblenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!