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

MySQL-Lösung für zeitgesteuerte Backups (mithilfe von Linux crontab)

Vorwort Obwohl manche Liebe auf dieser Welt ihren...

So handhaben Sie lange Daten bei der Anzeige in HTML

Bei der Anzeige langer Daten in HTML können Sie di...

Mehrere Grundsätze für die Produktdesign-Referenz auf Websites

In der folgenden Analyse geht es um Produktdesign...

Detaillierte Erklärung der Funktionsweise von Nginx

So funktioniert Nginx Nginx besteht aus einem Ker...

H-Tags sollten bei der Erstellung von Webseiten sinnvoll verwendet werden

HTML-Tags haben spezielle Tags zur Handhabung des ...

Detaillierte Erklärung der jQuery-Kettenaufrufe

Inhaltsverzeichnis Kettenanrufe Ein kleiner Koffe...

So installieren Sie MySql in CentOS 8 und erlauben Remoteverbindungen

Herunterladen und installieren. Prüfen Sie zunäch...

Tab-Effekte mit JS schreiben

In diesem Artikelbeispiel wird der spezifische Co...

Problem mit der Parameterübergabe beim Sprung auf HTML-Seite

Die Wirkung ist wie folgt: eine Seite Nach dem Kl...

Tipps zum reflektierenden Lernen von JavaScript

Inhaltsverzeichnis 1. Einleitung 2. Schnittstelle...

Embed-Codes für mehrere ältere Player

Die Player, die wir auf Webseiten sehen, sind nic...

Eine kurze Diskussion über JS-Prototypen und Prototypenketten

Inhaltsverzeichnis 1. Prototyp 2. Prototypzeiger:...

So passen Sie Docker-Images mit Dockerfile an

Anpassen von Bildern mit Dockerfile Unter Bildanp...