今天在維護(hù)優(yōu)化公司中臺(tái)項(xiàng)目時(shí)，發(fā)現(xiàn)路由的文件配置非常多非常亂，只要只中大型項(xiàng)目，都會(huì)進(jìn)入很多的路由頁(yè)面，規(guī)范一點(diǎn)的公司還會(huì)吧路由進(jìn)行模塊化導(dǎo)入，但是依然存在很多文件夾的和手動(dòng)導(dǎo)入的問(wèn)題。
于是我想到了我之前使用vuex時(shí)進(jìn)行的模塊化自動(dòng)導(dǎo)入js文件，能不能使用到自動(dòng)導(dǎo)入.vue文件中去，答案是可以！
只需要 15行代碼就優(yōu)化 300行路由配置并且在也不用去后期手動(dòng)添加路由配置！解放之鼓啊，廢話不多說(shuō)直接上核心代碼。
注意：如果你view下面有組件，那么你需要給組件的文件命名：components/組件.vue，不限制層級(jí)你可以在view下任意地方創(chuàng)建components開(kāi)發(fā)你的私有組件
1.核心代碼
// 自動(dòng)路由配置(自動(dòng)導(dǎo)入views文件下所有的文件內(nèi)的.vue文件進(jìn)行注冊(cè)到路由，除了文件名叫components下的vue文件不會(huì)被注冊(cè)進(jìn)行路由，默認(rèn)這是一個(gè)組件文件夾) const routeFiles = import.meta.glob('../views/**/*.vue'); // 獲取所有views文件下的.vue文件 const routesList = [] // 儲(chǔ)存符合路由頁(yè)面的對(duì)象內(nèi)容 // 會(huì)有一些頁(yè)面不需要自動(dòng)注冊(cè)，需要我們手動(dòng)添加的就在這里上路徑 const notRead = ['../views/index.vue','../views/login.vue','../views/index-data.vue','../views/notFound.vue.vue']; Object.keys(routeFiles).forEach(key => { if (key.indexOf('components') === -1 && notRead.indexOf(key) === -1) {// 排除組件 和 不需要自動(dòng)注冊(cè)的路由 const name = key.match(/\.\/(.+)\.vue$/)[1]; const component = routeFiles[key]; routesList.push({ path: `/${name.toLowerCase()}`, component: component.default || component, name: name }); } });
?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-709877.html
2.完整代碼
import { createRouter, createWebHashHistory } from 'vue-router';
import storage from '@/utils/sessionStore.js';
import { defineAsyncComponent, h } from 'vue'
// 自動(dòng)路由配置(自動(dòng)導(dǎo)入views文件下所有的文件內(nèi)的.vue文件進(jìn)行注冊(cè)到路由，除了文件名叫components下的vue文件不會(huì)被注冊(cè)進(jìn)行路由，默認(rèn)這是一個(gè)組件文件夾)
const routeFiles = import.meta.glob('../views/**/*.vue'); // 獲取所有views文件下的.vue文件
const routesList = [] // 儲(chǔ)存符合路由頁(yè)面的對(duì)象內(nèi)容
// 會(huì)有一些頁(yè)面不需要自動(dòng)注冊(cè)，需要我們手動(dòng)添加的就在這里上路徑
const notRead = ['../views/index.vue','../views/login.vue','../views/index-data.vue','../views/notFound.vue.vue'];
Object.keys(routeFiles).forEach(key => {
if (key.indexOf('components') === -1 && notRead.indexOf(key) === -1) {// 排除組件 和 不需要自動(dòng)注冊(cè)的路由
const name = key.match(/\.\/(.+)\.vue$/)[1];
const component = routeFiles[key];
routesList.push({
path: `/${name.toLowerCase()}`,
component: component.default || component,
name: name
});
}
});
const routes = [
{
path: '/',
name: 'login',
component: () => import('@/views/login.vue')
},
{
path: '/index',
name: 'index',
component: () => import('@/views/index.vue'),
children: [
{
path: '/index-data',
name: 'index-data',
component: () => import('@/views/index-data.vue'),
},
...routesList // 自動(dòng)配置在這個(gè)路由下（可以根據(jù)自己的需求進(jìn)行調(diào)整）
]
},
{
path: '/404',
name: '404',
component: () => import('@/views/notFound.vue')
},
];
const router = createRouter({
history: createWebHashHistory(),
routes
});
router.beforeEach((to, from, next) => {
next()
});
export default router
3.路由地址說(shuō)明
直接通過(guò)文件夾路徑層級(jí)來(lái)寫訪問(wèn)路由即可 列如：
/views/device/grouping
/views/device/list
/views/device/index/appList
后期直接創(chuàng)建文件夾與vue文件即可 不需要再去維護(hù)路由配置文件
?文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-709877.html
?
完！
?
到了這里，關(guān)于Vue3+vite路由配置優(yōu)化(自動(dòng)化導(dǎo)入)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
