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

Bereitstellung und Konfiguration des Apache-Dienstes unter Linux

Inhaltsverzeichnis 1 Die Rolle von Apache 2 Apach...

So erstellen Sie einen pptpd-Dienst in Alibaba Cloud Ubuntu 16.04

1. Um ein PPTP-VPN aufzubauen, müssen Sie Port 17...

Verwenden von Vue zum Implementieren einer Timerfunktion

In diesem Artikelbeispiel wird der spezifische Co...

Detaillierte Erklärung zum Einfügen gängiger Nginx-Befehle in Shell-Skripte

1. Erstellen Sie einen Ordner zum Speichern von N...

Umfassendes Verständnis der HTML-Grundstruktur

Einführung in HTML HyperText-Auszeichnungssprache...

Beispielcode für horizontalen Linienstil „hr“

Code kopieren Der Code lautet wie folgt: <hr S...

Eine vollständige Liste gängiger Linux-Systembefehle für Anfänger

Das Erlernen von Linux-Befehlen stellt für die me...

WeChat-Applet implementiert Suchfunktion und springt zur Suchergebnisseite

Suchseite: search.wxml-Seite: <view class=&quo...