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

// 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(),
    ルート
})

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