快捷導(dǎo)航

Vue3+vite路由配置優(yōu)化(自動化導(dǎo)入)

更新時間：2023年09月20日 09:57:39 作者：馬丁的車夫

這篇文章主要介紹了Vue3+vite路由配置優(yōu)化(自動化導(dǎo)入),需要的朋友可以參考下

今天在維護優(yōu)化公司中臺項目時，發(fā)現(xiàn)路由的文件配置非常多非常亂，只要只中大型項目，都會進入很多的路由頁面，規(guī)范一點的公司還會吧路由進行模塊化導(dǎo)入，但是依然存在很多文件夾的和手動導(dǎo)入的問題。

于是我想到了我之前使用vuex時進行的模塊化自動導(dǎo)入js文件，能不能使用到自動導(dǎo)入.vue文件中去，答案是可以！

只需要 15行代碼就優(yōu)化 300行路由配置并且在也不用去后期手動添加路由配置！解放之鼓啊，廢話不多說直接上核心代碼。

注意：如果你view下面有組件，那么你需要給組件的文件命名：components/組件.vue，不限制層級你可以在view下任意地方創(chuàng)建components開發(fā)你的私有組件

1.核心代碼

// 自動路由配置(自動導(dǎo)入views文件下所有的文件內(nèi)的.vue文件進行注冊到路由，除了文件名叫components下的vue文件不會被注冊進行路由，默認這是一個組件文件夾)
const routeFiles = import.meta.glob('../views/**/*.vue'); // 獲取所有views文件下的.vue文件
const routesList = [] // 儲存符合路由頁面的對象內(nèi)容
// 會有一些頁面不需要自動注冊，需要我們手動添加的就在這里上路徑
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) {// 排除組件 和 不需要自動注冊的路由
    const name = key.match(/\.\/(.+)\.vue$/)[1];
    const component = routeFiles[key];
    routesList.push({
      path: `/${name.toLowerCase()}`,
      component: component.default || component,
      name: name
    });
  }
});

2.完整代碼

import { createRouter, createWebHashHistory } from 'vue-router';
import storage from '@/utils/sessionStore.js';
import { defineAsyncComponent, h } from 'vue'
// 自動路由配置(自動導(dǎo)入views文件下所有的文件內(nèi)的.vue文件進行注冊到路由，除了文件名叫components下的vue文件不會被注冊進行路由，默認這是一個組件文件夾)
const routeFiles = import.meta.glob('../views/**/*.vue'); // 獲取所有views文件下的.vue文件
const routesList = [] // 儲存符合路由頁面的對象內(nèi)容
// 會有一些頁面不需要自動注冊，需要我們手動添加的就在這里上路徑
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) {// 排除組件 和 不需要自動注冊的路由
    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 // 自動配置在這個路由下（可以根據(jù)自己的需求進行調(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