Vue 路由：一行的 require.context 实现自动导入所有路由文件

2023-09-13 10:01:00

在 Vue 项目中，随着路由数量的增加，手动导入每个路由文件会变得很麻烦。为了简化这一过程，我们可以使用 require.context 一行代码来自动导入所有路由文件。

在使用 require.context 之前，我们首先需要创建一个 utils 文件夹，并在该文件夹中创建一个 importAll.js 文件。在该文件中，我们定义了一个 importAll 函数，用于自动导入所有路由文件。

// src/utils/importAll.js
export function importAll(r) {
  const modules = {}
  r.keys().forEach((key) => {
    const mod = r(key)
    modules[mod.default.name] = mod.default
  })
  return modules
}

接下来，我们在主路由文件中导入 importAll 函数，并使用它来自动导入所有路由文件。

// src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import importAll from '@/utils/importAll'

Vue.use(VueRouter)

const routes = importAll(require.context('@/router/component', true, /\.js$/))

const router = new VueRouter({
  mode: 'history',
  routes,
})

export default router

在上述代码中，require.context('@/router/component', true, /.js$/) 表示我们想要从 '@/router/component' 目录中导入所有以 .js 结尾的文件。true 表示递归导入子目录。

最后，我们就可以在 Vue 实例中使用自动导入的路由文件了。

// src/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')