Vue3.0 ルーティング自動インポート方法の例

Vue3.0 ルーティング自動インポート方法の例

1. 前提条件

インポートには require.context メソッドを使用します。vite で作成したプロジェクトで使用すると、「require not found」というエラーが報告されるため、webpack を使用してプロジェクトを作成する必要があります。または、Vite でこの問題を解決する方法を教えてもらえますか。

II. ルール

私たちが使用するルールは、src/views/ パスの下にあるすべてのディレクトリとサブディレクトリを検索し、「index.vue」という名前のファイルを検索し、親ディレクトリの名前を登録用のコンポーネント名として使用することです。構造は次のとおりです。

パブリックコンポーネントの登録と同様に、index.vue コンポーネントのみを登録し、他の名前のコンポーネントは登録されません。

3. インポート

// src/router/index.ts

'vue-router' から {createRouter、createWebHashHistory、createWebHistory、RouteRecordRaw} をインポートします。
「@/store」からストアをインポートします。
import daxie from "@/util/upper"; // 文字列の最初の文字を大文字にするメソッドを導入します。私はパス名の最初の文字を大文字にすることに慣れています。 // 自動ルーティング登録 const routerList:any = []
const requireComponent = require.context('@/views', true, /index.vue$/) // views パスの下にあるすべてのファイルを検索 const dynamic_route = requireComponent.keys().filter(fileName => {
    真を返す
})
// これでファイル配列の順序が乱れました。まず親ルートを先頭にして並べ替えます。子ルートが先頭にあり、親ルートが作成されていない場合は、エラーが報告されます。 // console.log(dynamic_route,"Before sorting")
dynamic_route.sort(関数(a,b):数値{
    const jieguoa:any = a.split("").filter((item:string)=>{
        戻り値 "/" == 項目
    })
    const jieguob:any = b.split("").filter((item:string)=>{
        戻り値 "/" == 項目
    })
    (jieguoa.length<jieguob.length)の場合{-1を返す}
    jieguoa.length>jieguob.lengthの場合{1を返す}
    0を返す
})

// console.log(dynamic_route,"ソート後")


dynamic_route.forEach(ファイル名 => {
    const パス = ファイル名.replace(".", "")
    const namelist = fileName.replace(".", "").replace("index.vue", "").split("/").filter((i:any) => {
        戻る
    })
    // テスト構成 const componentConfig = requireComponent(fileName)
    // コンポーネントは任意の属性を任意に追加できます。現在、必要な動的パラメータを格納する配列である canshu 属性が追加されています。// console.log(componentConfig.default,"Component Configuration 2")
    // 各レイヤーは手動で指定する必要があるため、3 つのレイヤーだけを指定します if (namelist.length == 1) {
        ルータリスト.push({
            パス:"/"+ namelist[namelist.length - 1],
            名前: daxie(namelist[namelist.length-1]),
            コンポーネント:()=>import(`../views${path}`),
            子供たち:[]、
        })
    }そうでない場合(namelist.length == 2){
        routerList.forEach((item:any)=>{
            if(item.name == daxie(namelist[0])){
                // コンポーネントにパラメータが必要かどうかを判定する const canshu = componentConfig.default.canshu || []
                if(canshu){
                    (i=0;i<canshu.length;i++) の場合
                        カンシュ[i] = "/:"+カンシュ[i]
                    }
                    アイテム.children.push({
                        パス: namelist[namelist.length-1] + canshu.join(""),
                        名前: daxie(namelist[namelist.length-1]),
                        コンポーネント:()=>import(`../views${path}`),
                        子供たち:[]、
                    })
                }それ以外{
                    アイテム.children.push({
                        パス: namelist[namelist.length-1],
                        名前: daxie(namelist[namelist.length-1]),
                        コンポーネント:()=>import(`../views${path}`),
                        子供たち:[]、
                    })
                }
            }
        })
    }そうでない場合(namelist.length == 3){
        routerList.forEach((item:any)=>{
            if(item.name == daxie(namelist[0])){
                item.children.forEach((yuansu:any)=>{
                    if (yuansu.name == daxie(namelist[1])){
                        // パラメータが必須かどうかを判定する const canshu = componentConfig.default.canshu || []
                        if(canshu){
                            (i=0;i<canshu.length;i++) の場合
                                カンシュ[i] = "/:"+カンシュ[i]
                            }
                            yuansu.children.push({
                                パス: namelist[namelist.length - 1]+canshu.join(""),
                                名前: daxie(namelist[namelist.length-1]),
                                コンポーネント:()=>import(`../views${path}`),
                            })
                        }それ以外 {
                            yuansu.children.push({
                                パス: namelist[namelist.length - 1],
                                名前: daxie(namelist[namelist.length-1]),
                                コンポーネント:()=>import(`../views${path}`),
                            })
                        }
                    }
                })
            }
        })
    }
})
const ルート: Array<RouteRecordRaw> = [
    {
        パス: '/'、
        名前: 'ホーム'、
        コンポーネント: ()=>import("@/views/shouye/shouye.vue")
    },
    {
        パス: '/about',
        名前: 'About'、
        コンポーネント: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
    },
    ...ルーターリスト、
    {
        パス: '/404',
        名前: '404',
        コンポーネント: () => import('@/views/404.vue')
    },
    {
        パス: '/:pathMatch(.*)',
        リダイレクト: '/404'
    },
]
// 順序に注意してください。最新のルーティング マッチング ルールによれば、404 ページは最後にある必要があります。
console.log(routes,"ルーティングテーブルの内容を表示する")

const ルーター = createRouter({
    履歴: createWebHistory(),
    // 履歴: createWebHashHistory(),
    ルート
})

デフォルトルーターをエクスポートする

このように、ルールに従ってコンポーネントを作成するだけで、ルートに自動的に登録されます。面倒な手動登録操作を排除します。

要約する

これで、vue3.0 ルート自動インポートに関するこの記事は終了です。vue3.0 ルート自動インポートに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue3.0 CLI - 3.2 ルーティングの基本チュートリアル
  • Vue2/vue3 ルーティング権限管理方法の例
  • Vue3ルーティングVueRouter4を使用する簡単な例

<<:  Ubuntu仮想マシンでシリアル通信にcutecomを使用する方法

>>:  Docker を使用して静的 Web サイト アプリケーションを作成する (複数の方法)

推薦する

MySQL データベースのステートメント ワイルドカード ファジー クエリの概要

MySQL エラー: パラメータ インデックスが範囲外です (1 > パラメータ数、つまり 0...

divの適応高さは残りの高さを自動的に埋めます

シナリオ 1: HTML: <div class="outer"> ...

ハイパーリンクの幅と高さを直接設定できない問題の解決策

幅と高さを直接使用することはできません。 display:block; または display:in...

JavaScript イベント委任 (プロキシ) の使用例の詳細

目次導入例: イベントの委任記述方法1: イベント委譲書き方2: 各子要素がイベントをバインドする例...

Vue2.x - アンチシェイクとスロットリングの使用例

目次ユーティリティ: vue での使用:説明する:画像安定化:スロットル:ユーティリティ: // 手...

一般的な XHTML タグの使用方法の紹介

XHTML には多くのタグがありますが、頻繁に使用されるのはごくわずかであり、習得する必要があるのは...

Linuxシステムはポート3306、8080などを外部に開放します。ファイアウォール設定の詳しい説明

多くの場合、Linux システムに Web サービス アプリケーション (Tomcat、Apache...

Docker+Jenkins+Gitlab+Djangoアプリケーションデプロイ実践の詳細な説明

1. 背景インターネット アプリケーションの急速な更新と反復という状況では、従来の手作業や単純なスク...

MySQL 8.0.18 のさまざまなバージョンのインストールとインストール中に発生した問題 (要点の要約)

概要: MYSQLの問題解決記録:どのようなインストール方法 (rpm、gz、gz.xz) を使用す...

40以上の美しいWebフォームデザイン例

Web フォームは、訪問者と Web サイト所有者間の主要なコミュニケーション チャネルです。フィー...

ウェブページを作るときに注意すべき5つのポイント

1. 色合わせの問題<br />Web ページには 3 色以上使用しないでください。そう...

Nginxポーリングアルゴリズムの基本的な実装方法の詳細な説明

ポーリングアルゴリズムの紹介多くの人が職場で nginx を使用しており、その設定に精通しています。...

Hadoop におけるネームノードとセカンダリネームノードの動作メカニズムの説明

1) プロセス 2) FSImageと編集NodeNode は HDFS の頭脳です。ファイルシステ...

VUE のコンパイル スコープとスロット スコープのスロットの問題について

スロットとは何ですか?スロット ディレクティブは v-slot であり、現在 slot と slot...

Linux の操作とメンテナンスの基本的なスワップ パーティションと LVM 管理のチュートリアル

目次1. スワップパーティション SWAP 1.1 スワップファイルを作成する1.2 スワップパーテ...