vue3.0路由自動(dòng)導(dǎo)入的方法實(shí)例
一、前提
我們使用的是require.context方法導(dǎo)入,在vite創(chuàng)建的項(xiàng)目?jī)?nèi)使用會(huì)報(bào)錯(cuò)"require not found",所以必須用webpack創(chuàng)建項(xiàng)目。或者有大能可以說(shuō)說(shuō)vite怎么解決這個(gè)問(wèn)題。
二、規(guī)則
我們使用的規(guī)則是,搜索src/views/路徑下的所有目錄和子目錄,搜索文件名叫做"index.vue"的文件,使用上級(jí)目錄的名字作為組件名,進(jìn)行注冊(cè)。結(jié)構(gòu)如下:
和公共組件注冊(cè)一樣,我們只注冊(cè)index.vue組件,其他名稱的組件不進(jìn)行注冊(cè)。
三、導(dǎo)入
// src/router/index.ts import {createRouter, createWebHashHistory, createWebHistory, RouteRecordRaw} from 'vue-router' import store from "@/store"; import daxie from "@/util/upper"; // 引入一個(gè)方法,將字符串的首字母進(jìn)行大寫,我習(xí)慣將pathname首字母大寫 // 路由自動(dòng)化注冊(cè) const routerList:any = [] const requireComponent = require.context('@/views', true, /index.vue$/) // 找到views路徑下的所有文件 const dynamic_route = requireComponent.keys().filter(fileName => { return true }) // 現(xiàn)在文件數(shù)組是亂序的,我們首先進(jìn)行排序,父級(jí)路由在前面,如果是子級(jí)路由在前面,結(jié)果父級(jí)理由還沒有創(chuàng)建,就會(huì)報(bào)錯(cuò) // console.log(dynamic_route,"排序前") dynamic_route.sort(function (a,b):number{ const jieguoa:any = a.split("").filter((item:string)=>{ return "/" == item }) const jieguob:any = b.split("").filter((item:string)=>{ return "/" == item }) if(jieguoa.length<jieguob.length){return -1} if(jieguoa.length>jieguob.length){return 1} return 0 }) // console.log(dynamic_route,"排序后") dynamic_route.forEach(fileName => { const path = fileName.replace(".", "") const namelist = fileName.replace(".", "").replace("index.vue", "").split("/").filter((i:any) => { return i }) // 測(cè)試配置 const componentConfig = requireComponent(fileName) // 組件可以隨意添加任何屬性,目前添加一個(gè)canshu屬性,是一個(gè)數(shù)組,里面存放著需要的動(dòng)態(tài)參數(shù) // console.log(componentConfig.default,"組件配置2") // 每一層都需要手動(dòng)指定,只做三層吧 if(namelist.length == 1){ routerList.push({ path:"/"+ namelist[namelist.length - 1], name: daxie(namelist[namelist.length-1]), component:()=>import(`../views${path}`), children:[], }) }else if(namelist.length == 2){ routerList.forEach((item:any)=>{ if(item.name == daxie(namelist[0])){ // 判斷組件是否需要參數(shù) const canshu = componentConfig.default.canshu || [] if(canshu){ for (let i=0;i<canshu.length;i++){ canshu[i] = "/:"+canshu[i] } item.children.push({ path: namelist[namelist.length-1] + canshu.join(""), name: daxie(namelist[namelist.length-1]), component:()=>import(`../views${path}`), children:[], }) }else{ item.children.push({ path: namelist[namelist.length-1], name: daxie(namelist[namelist.length-1]), component:()=>import(`../views${path}`), children:[], }) } } }) }else if(namelist.length == 3){ routerList.forEach((item:any)=>{ if(item.name == daxie(namelist[0])){ item.children.forEach((yuansu:any)=>{ if(yuansu.name == daxie(namelist[1])){ // 判斷是不是需要參數(shù) const canshu = componentConfig.default.canshu || [] if(canshu){ for (let i=0;i<canshu.length;i++){ canshu[i] = "/:"+canshu[i] } yuansu.children.push({ path: namelist[namelist.length - 1]+canshu.join(""), name: daxie(namelist[namelist.length-1]), component:()=>import(`../views${path}`), }) }else { yuansu.children.push({ path: namelist[namelist.length - 1], name: daxie(namelist[namelist.length-1]), component:()=>import(`../views${path}`), }) } } }) } }) } }) const routes: Array<RouteRecordRaw> = [ { path: '/', name: 'Home', component: ()=>import("@/views/shouye/shouye.vue") }, { path: '/about', name: 'About', component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') }, ...routerList, { path: '/404', name: '404', component: () => import('@/views/404.vue') }, { path: '/:pathMatch(.*)', redirect: '/404' }, ] // 注意順序,根據(jù)最新的路由匹配規(guī)則,404頁(yè)面必須在最后, console.log(routes,"查看路由表內(nèi)容") const router = createRouter({ history: createWebHistory(), // history: createWebHashHistory(), routes }) export default router
這樣,只需要根據(jù)規(guī)則創(chuàng)建組件,就會(huì)被自動(dòng)注冊(cè)到路由里面。免去手動(dòng)注冊(cè)的繁瑣操作。
總結(jié)
到此這篇關(guān)于vue3.0路由自動(dòng)導(dǎo)入的文章就介紹到這了,更多相關(guān)vue3.0路由自動(dòng)導(dǎo)入內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue移動(dòng)端下拉加載更多數(shù)據(jù)onload實(shí)現(xiàn)方法淺析
這篇文章主要介紹了Vue移動(dòng)端下拉加載更多數(shù)據(jù)onload實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-02-02HTML頁(yè)面中使用Vue示例進(jìn)階(快速學(xué)會(huì)上手Vue)
Vue是用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架。特色:構(gòu)建用戶界面—數(shù)據(jù)變成界面;漸進(jìn)式—Vue可以自底向上逐層的應(yīng)用。VUE有兩種使用方式,一種實(shí)在html中直接使用vue做開發(fā),一種是企業(yè)級(jí)的單頁(yè)面應(yīng)用。2023-02-02Vue filter 過(guò)濾當(dāng)前時(shí)間 實(shí)現(xiàn)實(shí)時(shí)更新效果
這篇文章主要介紹了Vue filter 過(guò)濾當(dāng)前時(shí)間 實(shí)現(xiàn)實(shí)時(shí)更新效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12Vue+Element的后臺(tái)管理框架的整合實(shí)踐
本文主要介紹了Vue+Element的后臺(tái)管理框架,在框架上,領(lǐng)導(dǎo)要用AdminLTE這套模板,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09vue3-vue-router創(chuàng)建靜態(tài)路由和動(dòng)態(tài)路由方式
這篇文章主要介紹了vue3-vue-router創(chuàng)建靜態(tài)路由和動(dòng)態(tài)路由方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10vue如何在項(xiàng)目中調(diào)用騰訊云的滑動(dòng)驗(yàn)證碼
這篇文章主要介紹了vue如何在項(xiàng)目中調(diào)用騰訊云的滑動(dòng)驗(yàn)證碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07基于electron+vue3+ts搭建桌面端應(yīng)用并且可以熱更新
這篇文章主要為大家詳細(xì)介紹了如何基于electron+vue3+ts搭建桌面端應(yīng)用并且可以熱更新,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以參考下2023-10-10Vue中虛擬DOM的簡(jiǎn)單實(shí)現(xiàn)
Vue中的虛擬DOM是通過(guò)JavaScript對(duì)象來(lái)描述真實(shí)DOM結(jié)構(gòu)的一種方式,本文將介紹Vue中虛擬DOM的簡(jiǎn)單實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2023-05-05