So leiten Sie eine PC-Adresse in Vue an eine Mobiladresse um

So leiten Sie eine PC-Adresse in Vue an eine Mobiladresse um

Anforderungen: Die PC-Seite und die mobile Seite sind zwei unabhängige Projekte. Die Inhalte der beiden Projekte sind grundsätzlich gleich und es gibt Regelmäßigkeiten in der Art und Weise, wie die Links kombiniert werden. Die Anforderung besteht darin, dass beim Aufrufen des URL-Links auf der PC-Seite auf der mobilen Seite auf die entsprechende Seite auf der mobilen Seite umgeleitet wird.

Die Art und Weise, wie diese Anforderung umgesetzt werden kann, ist relativ klar. Meine allgemeine Idee besteht darin, jede eingehende Routing-Anforderung beim Routing Guard zu überwachen und zu analysieren, ob die Anforderung vom mobilen Endgerät abgerufen wird. Wenn nicht, wird die Routing-Anforderung direkt freigegeben. Wenn ja, wird der einzugebende Routing-Pfad analysiert, die erforderlichen Felder im Pfad werden extrahiert und die Kombination wird als neuer Link zum mobilen Endgerät bezeichnet.

Es umfasst drei Wissenspunkte: 1. Routing Guard, 2. Client-Beurteilung, 3. Textextraktion mit regulären Ausdrücken. Als Nächstes werde ich diese Punkte nacheinander erläutern und den Quellcode des gesamten Entwicklungsprozesses zu Ihrer Referenz, zum Lernen oder für Ihre Kritik anhängen.

1. Routing-Wächter

  • zu: die Route zum Eintreten
  • von: Von welcher Route aus ist der Zugang möglich?
  • next: Routing-Steuerungsparameter, häufig verwendete next(true) und next(false)
//Alle Routing-Anfragen werden durch den Routing Guard geleitet,
router.beforeEach((bis, von, weiter) => {
	
    //Zugriffslink wie: http://localhost/page/detail/IUKGEQ/108/9933/32279/8
    //Der Zugriffspfad lautet: /page/detail/IUKGEQ/108/9933/32279/8
  	let toUrl = to.Pfad;
                                                                       
    //Diese Routenanforderung wird freigegeben next();

});

2. Bestimmen Sie den Kunden

navigator.userAgent : Ruft den Wert des User-Agent-Headers ab, der vom Browser für HTTP-Anfragen verwendet wird

 if (Fenstertyp !== 'undefiniert' && Fenstertyp.Navigator !== 'undefiniert') {
            if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
            	//Verarbeitung der Geschäftslogik auf der mobilen Seite}else{
				//Verarbeitung der Geschäftslogik auf der Computerseite}
   }

3. Regulärer Ausdruck (JS)

Grammatik

/regulärer Ausdruckstext/Modifikatoren (optional)

Modifikatoren

Ausdruck beschreiben
ich Führt einen Abgleich ohne Berücksichtigung der Groß-/Kleinschreibung durch.
G Führen Sie einen globalen Abgleich durch (finden Sie alle Übereinstimmungen, anstatt nach der ersten anzuhalten).
M Führt einen mehrzeiligen Abgleich durch.

suchen()

Mit der Methode search() können Sie in einer Zeichenfolge nach einer angegebenen Teilzeichenfolge suchen oder nach einer Teilzeichenfolge suchen, die einem regulären Ausdruck entspricht, und die Startposition der Teilzeichenfolge zurückgeben. Wenn nicht, wird **-1** zurückgegeben.

// Groß-/Kleinschreibung wird nicht beachtet var index = 'Hallo Welt!'.search(/world/i);

ersetzen()

Die Methode replace() wird verwendet, um einige Zeichen in einer Zeichenfolge durch andere Zeichen zu ersetzen oder eine Teilzeichenfolge zu ersetzen, die einem regulären Ausdruck entspricht.

var txt = 'Microsoft'.replace("Microsoft","Welt");

prüfen()

Mit der Methode test() wird geprüft, ob eine Zeichenfolge einem Muster entspricht. Wenn die Zeichenfolge übereinstimmenden Text enthält, wird true zurückgegeben, andernfalls false.

var flag = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent);

exec()

Die Methode exec() wird verwendet, um Übereinstimmungen eines regulären Ausdrucks innerhalb einer Zeichenfolge abzurufen.

Diese Funktion gibt ein Array mit den übereinstimmenden Ergebnissen zurück. Wenn keine Übereinstimmung gefunden wird, ist der Rückgabewert null.

var matchParams = /(\d{1,3})\/(\d{4,6})\/(\d{4,6})/.exec('/page/detail/IUKGEQ/108/9933/32279/8')

Referenz zur regulären Syntax: https://www.runoob.com/regexp/regexp-syntax.html

4. Quellcode:

exportiere Standard ({ App }) => {
    app.router.beforeEach((bis, von, weiter) => {
        if (Fenstertyp !== 'undefiniert' && Fenstertyp.Navigator !== 'undefiniert') {
            if(!/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
                //Wenn von einem Computer aus zugegriffen wird, wird next() direkt freigegeben;
            }anders{

                var sCode = '';
                let toUrl = to.Pfad;
                //Methode 1 zum Abrufen der Kennung: Abrufen über den Anforderungslink //Beispiel: /page/detail/IUKGEQ/108/9933/32279/8
                //Beispiel: /IUKGEQ
                //Regulärer Ausdruck zum Extrahieren der sechs Großbuchstaben in der Verbindung let matchArr = toUrl.match('\/([AZ]{6})');
                if((sCode=='' || sCode == null || sCode == undefiniert) && matchArr != null){
                    sCode = matchArr[1];
                }
    
                //Identifikationserfassungsmethode 2: Initiieren Sie eine Anforderung zum Abrufen des Codes 
                //Beispiel: /swpu
                let matchArr2 = toUrl.match('\/([az]{3,})');
                if((sCode=='' || sCode == null || sCode == undefiniert) && matchArr2 != null){
                    var param = matchArr2[1];
                    getSInfo2(param)
                    .then(res => {
                      wenn (res.data.code) {
                        sCode = res.daten.code;
                        //Routensprung mobileRouteCombine(toUrl,sCode);
                      } anders {
                        // Code kann nicht gefunden werden
                        nächste();//Veröffentlichung}
                    })
                    .catch(err => {
                        nächstes(); //Freigabe });
                }
                //Wenn die beiden oben genannten Methoden den Code nicht abrufen können, geben Sie ihn einfach frei, if(sCode=='' || sCode == null || sCode == undefined){
                    nächste();
                    zurückkehren;
                }anders{
                    //Routensprung mobileRouteCombine(toUrl,sCode);
                }
            }
        }
        nächste();
    })
}

/**
 * Neuorganisation des mobilen Routings * @param {zu besuchende URL-Adresse} toUrl 
 * @param [code] sCode 
 */
Funktion mobileRouteCombine(toUrl,sCode){
    var wxHomeUrl = conf.weixin + '/build/index.html?scode=' + sCode + '#/';
                
    // Wenn toUrl die Form /IUKGEQ hat, wird direkt zur WeChat-Startseite gesprungen, if(toUrl.length <= 7){
        Standort.href = wxHomeUrl;
    }

    //Artikellisteif(toUrl.indexOf('/page/list/') != -1){
        let matchParams = toUrl.match('(\\d{1,3})\/(\\d{4,6})'); 
        Lassen Sie catId = matchParams[2];
        let versionId = matchParams[1]; //Versions-ID
        var url = wxHomeUrl + 'Artikelliste?catId=' + catId;
        Standort.href = URL;     
    }

    //Artikeldetailsif(toUrl.indexOf('/page/detail/') != -1){
        let matchParams = toUrl.match('(\\d{1,3})\/(\\d{4,6})\/(\\d{4,6})'); 
        let infoId = matchParams[3];
        Lassen Sie catId = matchParams[2];
        let versionId = matchParams[1]; //Versions-ID
        var url = wxHomeUrl + 'articleDetail?infoId=' + infoId + '&catId=' + catId;
        Standort.href = URL;     
    }
}

Dies ist das Ende dieses Artikels über die Umleitung der PC-Adresse zum mobilen Endgerät in Vue. Weitere relevante Inhalte zur Vue-Adressumleitung finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Vue-Element-Admin integriert eine eigene Schnittstelle, um den Login-Sprung zu realisieren
  • Implementierung der Parametersprungfunktion im Vue-Projekt
  • Detaillierte Erklärung des Hash-Jump-Prinzips von Vue
  • So implementieren Sie Vue Page Jump
  • Vue implementiert Login, Registrierung, Beenden, Springen und andere Funktionen
  • Das Routing in Vue wird nicht in Verlaufsvorgängen gezählt.

<<:  So führen Sie den Betrieb nach dem Verlassen des Docker-Containers weiter aus

>>:  Analyse des HTML-Schreibstils und Gründe erfahrener Leute

Artikel empfehlen

Einführung und Verwendung von Triggern und Cursorn in MySQL

Trigger-Einführung Ein Trigger ist eine spezielle...

Beispielcode für kreisförmigen Hover-Effekt mit CSS-Übergängen

Dieser Artikel stellt vor Online-Vorschau und Dow...

Nodejs-Fehlerbehandlungsprozessaufzeichnung

In diesem Artikel wird der Verbindungsfehler ECON...

Native js implementiert Warenkorb-Logik und -Funktionen

In diesem Artikelbeispiel wird der spezifische Co...

VMware Workstation ist nicht mit Device/Credential Guard kompatibel

Beim Installieren einer virtuellen Maschine wird ...

Detaillierte Erklärung, wie NGINX PV, UV und unabhängige IP der Website zählt

Nginx: PV, UV, unabhängige IP Jeder, der Websites...

SQL-Implementierung von LeetCode (178. Punkterangliste)

[LeetCode] 178.Ranglistenergebnisse Schreiben Sie...

Beispiel für eine MySQL-DML-Sprachoperation

Zusätzliche Erklärung, Fremdschlüssel: Verwenden ...

Zusammenfassung der Anwendung von Übergangskomponenten in Vue-Projekten

​Transtion in Vue ist eine Kapselungskomponente f...

VUE implementiert einen Beispielcode für das Spiel Flappy Bird

Flappy Bird ist ein sehr einfaches kleines Spiel,...