So konfigurieren Sie die 404-Seite global für Vue-Anwendungen

Dieses Mal zeige ich Ihnen, wie Sie die 404-Seite für Vue-Anwendungen global konfigurieren. Was sind die Vorsichtsmaßnahmen für die globale Konfiguration von Vue-Anwendungen für 404-Seiten? . Werfen wir einen Blick darauf.

Nachdem Front-End und Back-End getrennt wurden, wird die Verantwortung für die Steuerung von Routing-Sprüngen auf das Front-End übertragen. Das Back-End ist nur für die Rückgabe eines HTML-Dokuments verantwortlich zum Frontend und stellt verschiedene Schnittstellen bereit. Die beiden Projekte, die wir unten als Beispiele verwenden, verwenden beide Vue als Grundgerüst. Das eine ist eine SPA-Anwendung und das andere eine mehrseitige Anwendung, die beide vom Frontend weitergeleitet, gesteuert und gerendert werden.

Allgemeine Idee

Ob es sich um eine einzelne Seite oder mehrere Seiten handelt, meine Implementierungsidee besteht darin, die gesamte 404-Seite im Vordergrund zu konfigurieren. End-Routing-Tabelle Fügen Sie eine Route mit dem Pfad „/404“ hinzu und rendern Sie die entsprechende 404-Seite. Konfigurieren Sie gleichzeitig eine Regel, um automatisch zur 404-Seite umzuleiten, wenn nicht alle Routen in der für den Benutzer zugänglichen Routing-Tabelle übereinstimmen können. Lassen Sie uns über meine verschiedenen Implementierungsmethoden für einzelne Seiten und mehrere Seiten sprechen.

SPAs 404-Routing-Konfiguration

Einzelseitige Anwendungskonfigurationsseite 404 unterscheidet auch zwei Situationen:

Die Situation einer festen Routing-Tabelle

Wenn die Routing-Tabelle von SPA fest ist, wird die Konfiguration der 404-Seite sehr einfach. Sie müssen lediglich eine Route mit dem Pfad 404 in der Routing-Tabelle hinzufügen und unten in der Routing-Tabelle eine Route mit dem Pfad * konfigurieren, um zur 404-Route umzuleiten.

(Da die Routing-Tabelle von oben nach unten abgeglichen wird, muss jede passende Regel unten platziert werden, sonst springen alle Routen unter dieser Routing-Regel auf 404 und können nicht korrekt abgeglichen werden.)

// router.js
export default new Router({
 mode: 'history',
 routes: [
 // ...
 {
 name: '404',
 path: '/404',
 component: () => import('@/views/notFound.vue')
 },
 {
 path: '*', // 此处需特别注意至于最底部
 redirect: '/404'
 }
 ],
})

Wenn die Routing-Tabelle dynamisch generiert wird

Wenn die Routing-Tabelle dynamisch generiert wird, dh die Routing-Tabelle ist in zwei Teile unterteilt: Ein Teil ist die grundlegende Routing-Tabelle und der andere Teil ist die Routing-Tabelle, die basierend auf den Berechtigungsinformationen des Benutzers dynamisch generiert werden muss.

In diesem Projekt verwendet die dynamische Generierung von Routen die mit vue-router gelieferte Methode addRoutes. Diese Methode fügt neue Routing-Regeln am Ende des ursprünglichen Routing-Tabellenarrays ein. Da jede übereinstimmende Regel, die auf die 404-Seite umleitet, am Ende der Routing-Tabelle stehen muss, extrahiere ich hier die Regel, die auf die 404-Seite umleitet, und füge nach dem Einfügen der dynamischen Route die Umleitungsregel ein, um sicherzustellen, dass die Regel vorhanden ist Unten in der Routing-Tabelle.

// router.js
export default new Router({
 mode: 'history',
 routes: [
 // ...
 {
 name: '404',
 path: '/404',
 component: () => import('@/views/notFound.vue')
 },
 // ...other codes
 ],
})
// notFoundRouterMap.js
export default [
 {
 name: '404',
 path: '/404',
 component: () => import('@/views/notFound.vue')
 },
 },
 {
 path: '*',
 redirect: '/404'
 }
]
// main.js
//...other codes
router.beforeEach((to, from, next) => {
 new Promise((resolve, reject) => {
 if (getCookie(tokenName)) {
 if (!getInfo()) {
 Promise.all([store.dispatch('getBasicInfo'), store.dispatch('getUserDetail')]).then(res => {
 store.dispatch('GenerateRoutes', { roles }).then(() => { 
 // 根据用户权限生成可访问的路由表
 router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
 router.addRoutes(NotFoundRouterMap) // 添加404及重定向路由规则
 resolve({ ...to, replace: true }) // 重新加载一次路由，让路由表更新成功后走下面else的判断
 })
 
 })
 } else {
 // ...other codes
 }
 } else {
 window.location.href = '/login.html'
 }
 }).then(res => {
 if (res) {
 next(res)
 } else {
 next()
 }
 }).catch(err => {
 new Error(err)
 next(false)
 })

404-Routing-Konfiguration für mehrseitige Anwendungen

Der Unterschied zwischen mehrseitigen Anwendungen und SPA besteht darin, dass jede Seite ihren eigenen Satz hat Routing, und jede Seite kann über einen eigenen Satz von 404-Seitenstilen verfügen oder auch nicht. Zu diesem Zeitpunkt kann die Methode zum dynamischen Hinzufügen von Routing-Regeln nicht mehr verwendet werden.

Die Lösung, die ich gewählt habe, besteht darin, die Routing-Übereinstimmungssituation im globalen Navigation-Schutz vor jedem zu beurteilen. Zu diesem Zeitpunkt müssen Sie das übereinstimmende Array im Vue-Navigationsschutz verwenden. Wenn es keine Übereinstimmung gibt, leiten Sie zur 404-Seite weiter. Natürlich wird diese 404-Seite auch als separate Seite eingestellt.

// permission.js
//...other codes
router.beforeEach((to, from, next) => {
 new Promise((resolve, reject) => {
 // ...other codes
 }).then(res => {
 if (!to.matched.length) {
 window.location = '/error.html#/404'
 return
 } 
 if (res) {
 next(res)
 } else {
 next()
 }
 }).catch(err => {
 new Error(err)
 next(false)
 })

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So erstellen Sie ein Miniprogramm mit mpvue

So erstellen Sie ein mpvue-Miniprogrammprojekt

Das obige ist der detaillierte Inhalt vonSo konfigurieren Sie die 404-Seite global für Vue-Anwendungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!