vue项目使用webpack的require.context实现动态创建路由

kaka-333

已于 2022-02-09 18:56:16 修改

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

文章标签： webpack vue.js javascript

于 2022-02-09 18:46:07 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45446474/article/details/122847724

该博客介绍了一个用于自动导入和注册Vue组件的 autorouter.js 文件。它利用webpack的require.context方法遍历views目录下所有.vue文件，并将它们以键值对形式存储在__modules对象中，方便在路由配置中动态加载。博客内容包括如何获取文件名，以及如何构建动态路由，特别是排除特定组件（如Login）并设置子路由。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

autorouter.js文件

function importAll(r) {
    let __modules = {}
    console.log(r.keys()) //可以得到一串数组，是所有以.vue为后缀的文件路径
    r.keys().forEach(key => {
            let m = r(key).default
            let n = m.name || getfilename(m.__file)
            console.log(m)
            __modules[n] = m
        })
        // console.log(__modules, 'll')
    return __modules
}

//获取路径中的文件名称
function getfilename(filename) {
    let arr = filename.split('/')
    let filenameword = arr[arr.length - 1].split('.')
    return filenameword[0]
}
//webpack的方法可以获取某一文件夹views下以.vue结尾的文件，第二个参数表示是否包含views内部文件夹里的文件
export default importAll(require.context('@/views', true, /\.vue$/))

此处在路由index.js中引入

import importAll from './autorouter'

import Vue from 'vue'
import VueRouter from 'vue-router'
import importAll from './autorouter'
Vue.use(VueRouter)
let children = []
for (let item in importAll) {
    // Vue.use(importAll[item])
    if (item !== 'Login') children.push({ path: `/${item}`, component: importAll[item] })
}
const routes = [{
        path: '/',
        redirect: '/login'
    },
    {
        path: '/login',
        component: importAll.Login//使用
    }, {
        path: '/main',
        component: importAll.Main,
        children: children
    },]

const router = new VueRouter({
    routes
})

export default router