Route statische Seite mit Vue-Router

Question

Ich bin ziemlich neu in der Web-Entwicklung und ich frage mich, ob es eine Möglichkeit, eine statische Webseite mit seinen eigenen Stylesheets und Javascripts, mit vue-router zu routen.

Sagen wir, ich habe ein Verzeichnis staticWebPage genannt, die enthält:

• eine index.html Datei
• ein javascripts Verzeichnis .js Dateien
• und ein Sheets Verzeichnis mit .css Dateien enthält

Jetzt möchte ich /mystaticwebpage zu dieser index.html Datei zuordnen, so dass es diese bestimmte statische Webseite anzeigt.

Ich möchte so etwas wie dies zu tun:

import VueRouter from 'vue-router' 
import AComponent from './components/AComponent.vue' 
import MyHtmlFile from './references/index.html' 

router.map({ 
    '/acomponent': { 
     component: AComponent 
    }, 
    'mystaticwebpage': { 
     component: MyHtmlFile 
    } 
}) 

Natürlich ist dies nicht, wie ich Vue Komponenten in router.map verweisen können nur nicht funktioniert.

Gibt es eine Möglichkeit, um den Weg zu dieser ./staticWebPage/index.html Datei die .js und .css aller Datei in dem Verzeichnis enthielt /staticWebPage verwenden?

Answer 1

Für Ihren Fall können Sie etwas tun, das die Code-Splitting-Funktion von Webpack verwendet.

Genauer gesagt, was Sie wollen, ist wahrscheinlich asynchrone Komponenten. Der Code (und die CSS), die in der Komponentendefinition verwendet werden (einschließlich aller darin enthaltenen Skripte), werden nur geladen, wenn auf die entsprechende Seite zugegriffen wird.

In großen Anwendungen benötigen wir können die App in kleinere Stücke zu teilen und nur eine Komponente vom Server geladen werden, wenn es tatsächlich erforderlich ist. Um dies zu vereinfachen, können Sie in Vue Ihre Komponente als Factory-Funktion definieren, die Ihre Definition asynchron löst. Vue wird nur die Factory-Funktion auslösen, wenn die -Komponente tatsächlich gerendert werden muss, und das Ergebnis für zukünftige Renderings zwischenspeichern.

Die Einrichtung kann etwas schwierig sein. Bitte beachten Sie die dedicated guide im VueJS doc.