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.

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.

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, //路由传参
    },
  ],
};

{
    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

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 :)

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

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') },
      ],
  },
}

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

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!