Vue アプリケーションの 404 ページをグローバルに設定する方法

今回は、Vue アプリケーションの 404 ページをグローバルに設定する方法と、Vue アプリケーションの 404 ページをグローバルに設定するための 注意事項 について説明します。以下は実際的なケースです。見てみましょう。

フロントエンドとバックエンドが分離された後、ルーティング ジャンプを制御する責任はフロントエンドに移され、バックエンドは

html ドキュメントをフロントエンドに返し、さまざまな機能を提供することのみを担当します。インターフェース。以下で例として使用する 2 つのプロジェクトはどちらも基本フレームワークとして Vue を使用しており、1 つは SPA アプリケーション、もう 1 つはマルチページ アプリケーションであり、どちらもフロントエンドによってルーティング、制御、レンダリングされます。

全体的なアイデア

単一ページか複数ページかに関係なく、私の実装アイデアは、フロントエンドルーティングテーブルにパス「/404」ルートを追加し、対応する404ページをレンダリングすることによって、404ページ全体を構成することです。ページに同時に、ユーザーがアクセスできるルーティング テーブル内のすべてのルートが一致しない場合に、404 ページに自動的にリダイレクトするルールを構成します。単一ページと複数ページに対するさまざまな実装方法について話しましょう。

SPA の 404 ルーティング構成

単一ページのアプリケーション構成 404 ページでは、次の 2 つの状況も区別されます。

ルーティング テーブルが固定されている状況

SPA のルーティング テーブルが固定されている場合、 404 ページは非常にシンプルになります。必要な作業は、パス 404 のルートをルーティング テーブルに追加し、パス * のルートをルーティング テーブルの下部に設定して、404 ルートにリダイレクトするだけです。

(ルーティング テーブルは上から下に照合されるため、一致するルールは最後に配置する必要があります。そうしないと、このルーティング ルールの下にあるすべてのルートが 404 にジャンプし、正しく一致できなくなります。)

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

ルーティングテーブルは動的に生成されます

ルーティング テーブルが動的に生成される場合、つまりルーティング テーブルは 2 つの部分に分割され、1 つの部分は基本的なルーティング テーブルであり、もう 1 つの部分は変更が必要なルーティング テーブルです。ユーザーの権限情報に基づいて動的に生成されます。

このプロジェクトでは、動的に生成されたルートは、vue-router に付属の addRoutes メソッドを使用します。このメソッドは、元のルーティング テーブル配列の末尾に新しいルーティング ルールを挿入します。 404 ページにリダイレクトする一致ルールはルーティング テーブルの最後にある必要があるため、ここでは 404 ページにリダイレクトするルールを抽出し、動的ルートを挿入した後、リダイレクト ルールを挿入してルールが次の位置にあることを確認します。ルーティングテーブルの一番下 テーブルの一番下。

// 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 ルーティング設定

マルチページ アプリケーションと SPA の違いは、各ページに独自のルートのセットがあり、各ページに独自の 404 ページ スタイルのセットがある場合があることです。もちろんそうではないかもしれません。現時点では、ルーティングルールを動的に追加する方法は使用できなくなります。

私が採用した解決策は、グローバル

Navigationguard beforeEachでルートの一致状況を判断することです。このとき、vueのナビゲーションガードで一致した配列を使用する必要があります。一致するものがない場合は、404 ページにリダイレクトされます。もちろん、この404ページも別ページとして設定されています。

// 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)
 })

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

mpvueでミニプログラムを構築する方法

mpvueミニプログラムプロジェクトを構築する方法

以上がVue アプリケーションの 404 ページをグローバルに設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。