Vue-Router: Dynamischer Routenabgleich, dynamischer Routenabgleich

Dieser Artikel stellt hauptsächlich den Vue-Router vor: Er hat einen gewissen Referenzwert. Jetzt können Freunde in Not darauf verweisen Einseitige Anwendungen werden zusammengeführt und zu mehrseitigen Anwendungen aktualisiert, um Coderedundanz und wiederholtes Packen zu reduzieren. Da es in die ursprüngliche Django-Struktur und Vue-cli-Konfiguration integriert ist, werden viele Konfigurationsänderungen vorgenommen, um es an Django anzupassen. Es ist nicht universell portierbar und dient nur als Referenz.

Die Grube wird langsam gefüllt, beginnen wir mit der Verlegung. Die Hauptidee besteht darin, dass ein Eingang einer Einzelseitenanwendung entspricht. Jede Einzelseitenanwendung ist unabhängig und es gibt keine Routing-Sprünge untereinander. In einer Einzelseiten-Anwendung gibt es Routing-Sprünge zwischen mehreren Komponenten, also jeder einzelnen -page-Anwendung Seitenanwendungen haben ihre eigene Routing-Konfiguration.

Dynamischer Routenabgleich

besteht darin, alle Routen, die einem bestimmten Muster entsprechen, derselben Komponente zuzuordnen. Gemäß den Beispielen in den offiziellen Dokumenten verfügen wir beispielsweise über eine RequestList-Komponente, die die grundlegenden Informationen aller Anfragen enthält. Klicken Sie auf die ID einer Anfrage, um zu den detaillierten Informationen der Anfrage zu gelangen. Für alle IDs mit unterschiedlichen Anforderungen kann die RequestDetail-Komponente verwendet werden, und der Effekt kann durch „dynamische Pfadparameter (dynamisches Segment)“ erzielt werden.

Auf diese Weise werden

und
derselben Route zugeordnet. Die Parameter werden über die Route an die Komponente übergeben. Auf die übergebenen Parameter kann zugegriffen werden oder mehrere. /demo/request/1

import RequestList from '@/components/RequestList';
import RequestDetail from '@/components/RequestDetail';

export default {
  base: '/demo/',
  mode: 'history',
  linkActiveClass: 'active',
  routes: [
    {
      path: '/',
      name: 'requestList',
      component: RequestList,
    },
    {
      path: '/request/:requestId',
      name: 'requestDetail',
      component: RequestDetail,
      props: props, //路由传参
    },
  ],
};

/demo/request/2 Manchmal kann es auch als Route mit Abfrageparametern konfiguriert werden, aber ich persönlich finde, dass eine solche Route this.$route.params nicht sehr schön ist und die Parameter dem Benutzer preisgibt.

{
    path: '/request',
    name: 'requestDetail',
    component: RequestDetail,
    props: route => ({ requestId: route.query.requestId }), //路由传参
},

Diese Woche habe ich eine neue Single-Page-Anwendung zur Multi-Page-Anwendung hinzugefügt und dynamisches Routing konfiguriert. Im /demo/request?requestId=1-Entwicklungsmodus kann sie nur mit der Root-Route

übereinstimmen, und das hat sie auch been

Für Unterrouten kann nichts gerendert werden. Zuerst habe ich nicht die passenden Schlüsselwörter gefunden, um nach verwandten Problemen zu suchen. Nachdem ich lange gekämpft hatte, stellte ich schließlich fest, dass jemand auf das gleiche Problem gestoßen war. Der Pfad kann bei der Seitenaktualisierung nicht abgerufen werden. dev/cannot getEs stellte sich heraus, dass es ein Fehler in der Vue-Webpack-Vorlage unter Windows war

Ok, gut :)

Tatsächlich ist dieser Fehler aufgetreten Das aktuelle Vue wurde in der Webpack-Vorlage behoben. Wenn wir die HTML5-Verlaufs-API verwenden, wird index.html zurückgegeben Hier ist Was?

historyApiFallback: {
    rewrites: [
        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
    ],
},

Im Entwicklungsmodus entspricht es tatsächlich dem lokalen Einrichten eines virtuellen Servers. Eine einseitige Anwendung entspricht einer HTML-Vorlagendatei und dem JS-CSS-Code aller zugehörigen Komponenten Der entsprechende Eingang wird in diese HTML-Vorlagendatei eingefügt, sodass unsere Routing-Konfiguration auch analysiert und mit dem JS-Code in der entsprechenden Vorlagendatei abgeglichen werden muss. Aufgrund meiner mehrseitigen Anwendungskonfiguration kann ich jedoch, wenn ich

in die Adressleiste eingebe, die entsprechende Ressource nicht finden. Ich muss zur entsprechenden HTML-Vorlagendatei zurückkehren, die auch mit der Vorlagendatei identisch ist Von Ihrem Entwickler konfiguriert. Pfadbezogen. webpack.dev.conf.js

devServer: {
  historyApiFallback: {
      rewrites: [
        { from: /^\/demo/, to: path.posix.join(config.dev.assetsPublicPath, 'demo/index.html') },
        { from: /^\/test/, to: path.posix.join(config.dev.assetsPublicPath, 'test/index.html') },
      ],
  },
}

historyApiFallbackViele Front-End-Neulinge entscheiden sich für die Verwendung von Vue-cli zum Erstellen von Projekten, wenn sie zum ersten Mal mit Vue in Kontakt kommen. Die Konfiguration der Vorlage ist bis zu einem gewissen Grad konfigurierbar und vollständig, was ausreicht Erfüllen Sie die Anforderungen allgemeiner Einzelseitenanwendungen. Das erspart wirklich Ärger. Aber das Frontend konzentriert sich nicht mehr nur auf den Code, sondern auch auf das Design der gesamten Projektarchitektur. Eine gute Struktur ist gleichbedeutend mit der halben Arbeit und der anschließende Entwicklungsprozess wird sehr reibungslos verlaufen.

Das Frontend ist nicht so einfach, wie sich Laien vorstellen, obwohl es nicht sehr kompliziert ist. Positionieren Sie sich als Frontend-Architekt und nicht als Code-Porter. Daher wird jedem, der tiefer in das Front-End eintauchen möchte, dringend empfohlen, die Webpack-Konfiguration von Vue-cli zu interpretieren und zu korrigieren (dasselbe gilt für React) und dann die Webpack-Dokumentation vollständig durchzugehen Teilen Sie im Grunde die Front-End-Engineering-Codeaufteilung (Codeaufteilung) und verstehe den Großteil des Lazy Loading. Anschließend versuche ich, die Konfiguration zu schreiben und die Architektur selbst zu entwerfen. /demo/request/1

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Verwenden von Mixin zum Schreiben von Plug-Ins für selbst erstellte Vue-Komponenten-Kommunikations-Plug-Ins

Konfiguration|electron+vue+ts +sqlite-Konfigurationsmethode

Das obige ist der detaillierte Inhalt vonVue-Router: Dynamischer Routenabgleich, dynamischer Routenabgleich. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!