1. Verlaufsmodus, Hash-Modus
„Vue Router ist der offizielle Routing-Manager von Vue.js, der zum Erstellen von Front-End-Routing für Single-Page-Anwendungen verwendet wird. Es ermöglicht Ihnen, verschiedene URLs entsprechenden Komponenten zuzuordnen, indem Sie Routing-Konfigurationen definieren, um Sprünge und Navigation zwischen Seiten zu ermöglichen. Vue Router unterstützt zwei Routing-Modi: Verlaufsmodus und Hash-Modus.
1. Verlaufsmodus
„Im Verlaufsmodus verwaltet Vue Router das Routing mithilfe der HTML5-Verlaufs-API und verwendet kein Hash (#) in der URL als Routing-Tag. Stattdessen verlässt es sich zur Verwaltung von URL-Änderungen auf die Verlaufs-API des Browsers.
Die Verwendung des Verlaufsmodus erfordert die Mitarbeit des Backend-Servers. Wenn ein Benutzer direkt auf eine Seite im Browser zugreift oder die Seite aktualisiert, muss der Backend-Server konfiguriert werden, um sicherzustellen, dass die entsprechende Front-End-Routing-Seite zurückgegeben wird. Dies liegt daran, dass im Verlaufsmodus das Front-End-Routing und das Back-End-Routing getrennt sind und das Back-End alle Routing-Anfragen an die Front-End-Eingabeseite umleiten muss.
- Bei Verwendung des Verlaufsmodus enthält die URL kein #-Symbol.
- Ändern Sie die URL über die HTML5-Verlaufs-API (pushState und replaceState), um einen Front-End-Routing-Sprung zu implementieren.
- Der Server muss entsprechend konfiguriert werden, um sicherzustellen, dass er beim Aktualisieren der Seite oder beim direkten Zugriff auf eine Unterroute immer noch korrekt die Seite zurückgeben kann, die der Front-End-Route entspricht.
- Beispiel-URL: https://example.com/my-route
2. Hash-Modus
„Der Hash-Modus ist ein einfacher und allgemeiner Routing-Modus im Vue Router, der Hashes (#) in URLs verwendet, um das Routing zu verwalten. Wenn sich der Hash-Wert in der URL ändert, gleicht Vue Router die entsprechende Route basierend auf dem Hash-Wert ab.
- Bei Verwendung des Hash-Modus enthält die URL ein #-Symbol, gefolgt vom Routing-Pfad.
- Ändern Sie den Hash-Wert in der URL, indem Sie das Hashchange-Ereignis abhören, um einen Front-End-Routing-Sprung zu implementieren.
- Es ist keine spezielle Konfiguration des Servers erforderlich, da Änderungen am Hash-Teil nicht an den Server gesendet werden.
- Beispiel-URL: https://example.com/#/my-route
3. Der Unterschied zwischen dem Verlaufsmodus und dem Hash-Modus
- URLs im Verlaufsmodus sind schöner und übersichtlicher und ähneln eher herkömmlichen URL-Strukturen.
- URLs im Hash-Modus sind gut kompatibel, erfordern keine spezielle Serverkonfiguration und können in fast allen Umgebungen verwendet werden.
- Bei Verwendung des Verlaufsmodus müssen Sie sicherstellen, dass die serverseitige Konfiguration korrekt ist, damit die entsprechende Seite beim Aktualisieren der Seite oder beim direkten Zugriff auf die Unterroute korrekt zurückgegeben werden kann. Der Hash-Modus erfordert keine solche Konfiguration.
„Kurz gesagt, die URL des Verlaufsmodus entspricht möglicherweise eher den Gewohnheiten der Benutzer, erfordert jedoch eine Serverkonfiguration. Der Hash-Modus ist einfacher und benutzerfreundlicher, die URL enthält jedoch ein #-Symbol. Die Auswahl des zu verwendenden Routing-Modus hängt von Ihren Projektanforderungen und Ihrer Serverumgebung ab.
2. Nginx-Serverkonfiguration bei Verwendung des Verlaufsmodus
Im Verlaufsmodus muss der Server entsprechend konfiguriert werden, um sicherzustellen, dass die der Front-End-Route entsprechende Seite beim Aktualisieren der Seite oder beim direkten Zugriff auf eine Unterroute weiterhin korrekt zurückgegeben werden kann. Wenn Sie einen Nginx-Server verwenden, können Sie die try_files-Konfiguration verwenden, um alle Anfragen an die Front-End-Einstiegsseite umzuleiten. Gleichzeitig müssen im Vue-Projekt auch relevante Konfigurationen hinzugefügt werden, um sicherzustellen, dass die Routing-Adresse korrekt ist. Die spezifische Implementierung lautet wie folgt:
„Zunächst muss die Datei main.js das Router-Routing einführen. Der Code lautet wie folgt:
import Vue from 'vue'
import App from './App.vue'
import router from "./router/index";
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App),
}).$mount('#app')
„Dann erfordert die Grundkonfiguration der App.vue-Datei keine spezielle Verarbeitung. Der Code lautet wie folgt:
<template>
<div id="app">
<h1>APP B</h1>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
</style>
Ändern Sie dann die Routing-Konfigurationsdatei ./router/index.js. In dieser Datei konfigurieren wir den Verlaufsmodus und müssen auch den Basispfad konfigurieren, um den korrekten Routing-Zugriff sicherzustellen. Der Code ist wie folgt implementiert:
import VueRouter from 'vue-router';
import Hello from "../components/Hello.vue"
import Vue from "vue";
Vue.use(VueRouter)
const router = new VueRouter({
mode: 'history',
base:'/app2/',
routes:[
{
path: '/hello',
name: 'hello',
component: Hello
},
],
})
export default router;
Ändern Sie dann die Verpackungskonfigurationsdatei vue.config.js. Hier müssen Sie sicherstellen, dass der publichPath mit der oben genannten baseUrl übereinstimmt und das entsprechende Projekt unter der sekundären Verzeichnisadresse „/app2/“ auf dem Server bereitgestellt wird.
module.exports = {
transpileDependencies: ["vue"],
publicPath: '/app2/', // 设置上下文路径，与Tomcat或Nginx中的上下文路径保持一致
indexPath: 'index.html', // 相对于打包路径index.html的路径
outputDir: process.env.outputDir || 'app2', // 'dist', 生产环境构建文件的目录
devServer: {
headers: {
'Access-Control-Allow-Origin': '*',
}
}
};
Ändern Sie abschließend die Nginx-Konfigurationsdatei nginx.conf und leiten Sie mit try_files alle Anforderungen an die Front-End-Einstiegsseite um. Die Konfiguration ist wie folgt:
server {
listen 8000;
server_name 192.168.1.87;
root html;
location /app2 {
try_files $uri $uri/ /app2/index.html;
}
}
Gemäß der obigen Konfiguration sollte der Speicherort unserer Front-End-Seite in ./html/app2/ im Nginx-Stammverzeichnis bereitgestellt werden. An diesem Punkt können wir das Routing im Verlaufsmodus normal verwenden.