Beispiel für eine automatische Importmethode für das Vue3.0-Routing

// src/router/index.ts

importiere {createRouter, createWebHashHistory, createWebHistory, RouteRecordRaw} von 'vue-router'
Store aus „@/store“ importieren;
importiere daxie von "@/util/upper"; // Führe eine Methode ein, um den ersten Buchstaben eines Strings groß zu schreiben. Ich bin es gewohnt, den ersten Buchstaben des Pfadnamens groß zu schreiben. // Automatische Routing-Registrierung const routerList:any = []
const requireComponent = require.context('@/views', true, /index.vue$/) // Alle Dateien unter dem Ansichtspfad suchen const dynamic_route = requireComponent.keys().filter(fileName => {
    returniere wahr
})
// Jetzt ist das Dateiarray nicht in der richtigen Reihenfolge. Wir sortieren es zuerst, mit der übergeordneten Route an erster Stelle. Wenn die untergeordnete Route an erster Stelle steht und die übergeordnete Route nicht erstellt wurde, wird ein Fehler gemeldet. // console.log(dynamic_route,"Vor dem Sortieren")
dynamic_route.sort(Funktion (a,b):Nummer{
    const jieguoa:any = a.split("").filter((item:string)=>{
        return "/" == Artikel
    })
    const jieguob:any = b.split("").filter((item:string)=>{
        return "/" == Artikel
    })
    wenn (jieguoa.Länge<jieguob.Länge){return -1}
    wenn(jieguoa.Länge>jieguob.Länge){return 1}
    Rückgabe 0
})

// console.log(dynamic_route,"nach dem Sortieren")


dynamic_route.forEach(Dateiname => {
    const Pfad = Dateiname.replace(".", "")
    const namelist = fileName.replace(".", "").replace("index.vue", "").split("/").filter((i:any) => {
        Rückkehr ich
    })
    // Testkonfiguration const componentConfig = requireComponent(Dateiname)
    // Die Komponente kann nach Belieben beliebige Attribute hinzufügen. Derzeit wird ein Canshu-Attribut hinzugefügt, ein Array, das die erforderlichen dynamischen Parameter speichert. // console.log(componentConfig.default,"Komponentenkonfiguration 2")
    // Jede Ebene muss manuell angegeben werden, also führen Sie einfach drei Ebenen aus, if (namelist.length == 1) {
        routerList.push({
            Pfad:"/"+ Namensliste[Namensliste.Länge - 1],
            Name: daxie(Namensliste[Namensliste.Länge-1]),
            Komponente:()=>import(`../views${path}`),
            Kinder:[],
        })
    }sonst wenn(Namensliste.Länge == 2){
        routerList.fürJeden((item:any)=>{
            wenn(item.name == daxie(namelist[0])){
                // Bestimmen Sie, ob die Komponente Parameter benötigt const canshu = componentConfig.default.canshu || []
                wenn(kannst du){
                    für (lass i=0;i<canshu.length;i++){
                        canshu[i] = "/:"+canshu[i]
                    }
                    Artikel.Kinder.push({
                        Pfad: Namensliste[Namensliste.Länge-1] + canshu.join(""),
                        Name: daxie(Namensliste[Namensliste.Länge-1]),
                        Komponente:()=>import(`../views${path}`),
                        Kinder:[],
                    })
                }anders{
                    Artikel.Kinder.push({
                        Pfad: Namensliste[Namensliste.Länge-1],
                        Name: daxie(Namensliste[Namensliste.Länge-1]),
                        Komponente:()=>import(`../views${path}`),
                        Kinder:[],
                    })
                }
            }
        })
    }sonst wenn(Namensliste.Länge == 3){
        routerList.fürJeden((item:any)=>{
            wenn(item.name == daxie(namelist[0])){
                item.children.forEach((yuansu:any)=>{
                    wenn (yuansu.name == daxie(namensliste[1])){
                        // Bestimmen Sie, ob der Parameter erforderlich ist const canshu = componentConfig.default.canshu || []
                        wenn(kannst du){
                            für (lass i=0;i<canshu.length;i++){
                                canshu[i] = "/:"+canshu[i]
                            }
                            yuansu.Kinder.push({
                                Pfad: Namensliste[Namensliste.Länge - 1]+canshu.join(""),
                                Name: daxie(Namensliste[Namensliste.Länge-1]),
                                Komponente:()=>import(`../views${path}`),
                            })
                        }anders {
                            yuansu.Kinder.push({
                                Pfad: Namensliste[Namensliste.Länge - 1],
                                Name: daxie(Namensliste[Namensliste.Länge-1]),
                                Komponente:()=>import(`../views${path}`),
                            })
                        }
                    }
                })
            }
        })
    }
})
const routes: Array<RouteRecordRaw> = [
    {
        Weg: '/',
        Name: "Home",
        Komponente: ()=>import("@/views/shouye/shouye.vue")
    },
    {
        Pfad: '/about',
        Name: 'Über',
        Komponente: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
    },
    ...Routerliste,
    {
        Pfad: '/404',
        Name: '404',
        Komponente: () => import('@/views/404.vue')
    },
    {
        Pfad: '/:pathMatch(.*)',
        Umleitung: '/404'
    },
]
// Achten Sie auf die Reihenfolge. Nach den neuesten Routing-Matching-Regeln muss die 404-Seite am Ende stehen.
console.log(routes,"Den Inhalt der Routing-Tabelle anzeigen")

const router = createRouter({
    Verlauf: createWebHistory(),
    // Verlauf: createWebHashHistory(),
    Routen
})

Standardrouter exportieren