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 サイト アプリケーションを作成する (複数の方法)

推薦する

Linux で Ceph 分散ソフトウェアをインストールして使用する方法に関するチュートリアル

目次序文1. 基本環境1. サービス配信2. ネットワーク構成(全ノード) 3. SSHパスワードフ...

mysql インストーラ コミュニティ 8.0.12.0 インストール グラフィック チュートリアル

このチュートリアルでは、参考のためにmysqlインストーラコミュニティ8.0.12.0のインストール...

UTF8 でエンコードされた Web ページにファイルが含まれている場合の、ページの前の空白行の解決方法

<br />このページはUTF8エンコードを使用しており、ヘッダーとフッターはテンプレー...

PHP環境構築におけるDockerの柔軟な実装

Docker を使用して、柔軟なオンライン PHP 環境を構築します。場合によっては、他の人がすでに...

Nginxリバースプロキシ設定でプレフィックスが削除される

nginx をリバース プロキシとして使用する場合、リクエストをそのまま次のサービスに転送するだけで...

CSS3で実装された6つの境界遷移効果

6つの効果実装コードhtml <h1>CSS 境界遷移</h1> <セ...

JavaScript の for/of、for/in の詳細な紹介

目次JavaScriptでは、 forループを記述する一般的な方法がいくつかあります。最初の、そして...

HTML テーブル マークアップ チュートリアル (42): テーブル ヘッダーの水平方向の配置属性 ALIGN

水平方向では、テーブル ヘッダーの配置を左、中央、右に設定できます。基本的な構文<TH ALI...

docker nginxコンテナの起動とローカルへのマウントの詳細な説明

まず、nginx コンテナ内の構造:コンテナを入力します: docker exec -it b511...

MySQLチュートリアルDMLデータ操作言語の例の詳細な説明

目次1. データ操作言語 (DML) 2. データを追加する(挿入) 3. 既存のテーブルをコピーし...

JavaScript キャンバスは影付きのグラフィックとテキストを実装します

キャンバスを使用して、参照用の影付きのグラフィックとテキストを作成します。具体的な内容は次のとおりで...

vue+elementuiは、共有箇条書きボックスの追加と変更の完全なコードを実装します。

目次1. 新しいII. 変更element-ui は、Ele.me のフロントエンド チームが開発者...

データ型の判断における js typeof と instanceof の違いと、その開発と使用について

目次1. typeof演算子2. インスタンスオブ演算子3. typeof と instanceof...

JS を使用してクリップボード内の Excel コンテンツを解析する方法

目次序文1. イベントとクリップボードを貼り付ける2. クリップボード内のコンテンツ形式3. HTM...