So springen Sie in Vue zur vorherigen Seite

Dieser Artikel teilt Ihnen eine Funktion mit, die Vue implementiert, um nach dem Anmelden zur vorherigen Seite zu springen. Freunde, die diesen Komfort benötigen, können davon lernen.

In der Entwicklung stoßen wir häufig auf eine solche Anforderung. Der Benutzer muss direkt auf einen Link klicken, um eine Seite aufzurufen. Nachdem der Benutzer auf den Link geklickt hat, wird ein 401-Abfang ausgelöst Wenn er sich anmeldet, springt er zur verlinkten Seite und nicht zur Startseite. Wie sollen wir dieses Problem lösen?

Lassen Sie uns zunächst über einige APIs sprechen, die wir verwenden müssen:

1.router.currentRoute: Das aktuelle Routing-Informationsobjekt. Wir können die analysierte URL über router.currentRoute.fullPath abrufen. Enthält Der vollständige Pfad der Abfrageparameter und des Hashs. Wenn die Route der Seite, auf die zugegriffen werden soll, einen Namen hat, können Sie den Namen der aktuellen Route über router.currentRoute.name abrufen.

2.router.replace: Die Funktion ist dieselbe wie router.push, fügt jedoch keine neuen Datensätze zum Verlauf hinzu, sondern ersetzt den aktuellen Verlaufseintrag.

Da jeder Code anders geschrieben ist, werde ich meinen spezifischen Implementierungscode nicht angeben, sondern die Idee kurz vorstellen:

1 Nachdem der Benutzer auf den Link geklickt hat, wird das Ziel zum Weiterleiten angezeigt Seite, lösen Sie dann den 401-Interceptor aus und kehren Sie zur Anmeldeseite zurück:

//401拦截
if（status == "401"）{
  router.push("/login")   
}

2 Wir können den Ziellink in der URL speichern, wenn 401 abfängt:

if (status == 401) {
   //判断当前的路由是否是目标路由
   if(router.currentRoute.name == "target"){
    //跳转回login路由，并把目标路由的url路径保存在login的query中
    router.replace({
     name:"login",
     query: {redirect: router.currentRoute.fullPath}
    })
   }else{
    /* 普通401拦截直接返回到登录页面 */
    router.push('/login');
   }
  }

3 Nach dem Klicken auf „Anmelden“. Abfrage in der URL gespeichert, um direkt zur Zielseite zurückzukehren

router.push({path:decodeURIComponent(url)});

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Detaillierte Einführung in das chinesische Dokument von vuex

So generieren Sie eine Dropdown-Liste mit reinem Js

Informationen zur Verwendung von Dateien in Vue

Wie man JQuery in das Vue-CLI-Webpack einführt (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonSo springen Sie in Vue zur vorherigen Seite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!