vue2 vue3 懒加载 store router module/* 形式懒加载 store router 利用 store.has store.registerModule 利用 router.has router.addRoute

安装

# pnpm
pnpm i imba-lazy-store-router

格式

router/module/*
store/module/*

使用

router/index.js router lazy 初始化

import { createRouter, createWebHistory } from 'vue-router'
import { setLazyRouter } from 'imba-lazy-store-router'

const router = createRouter({ history: createWebHistory()})
const moduleArray = import.meta.glob('./module/*.js')
setLazyRouter(moduleArray, router)

store/index.js store lazy 初始化

import { createStore } from 'vuex'
import { setLazyStore } from 'imba-lazy-store-router'

const store = createStore()
const moduleArray = import.meta.glob('./module/*.js')
setLazyStore(moduleArray, store)

router.js -> beforeEach

import store from '... store'
import { setMetaKey, berforeInject } from 'imba-lazy-store-router'

// meta.auth meta.store meta.router
setMetaKey({
 auth: 'auth',
 store: 'store',
 router: 'router'
})

// 设置用户权限列表 没有就跳401 | 可注释
const user_role = () => store.state.user_vuex.user_role
setUserRole(user_role)

router.beforeEach(({ path, matched }, from, next) => {
  ...

  berforeInject(matched, (res) => {
    if (typeof res === 'string') {
      next(res)
      return
    }
    console.log('test berforeInject...')
    next()
  })
})

main.js mount

import { createApp } from 'vue'
import App from './App.vue'

import store from '... store'
import router from '... router'
import { initLzayStore, initLzayRouter } from 'imba-lazy-store-router'

const app = createApp(App)
Promise.allSettled([initLzayStore(), initLzayRouter()]).then(() => {
 app.use(store)
 app.use(router)
 app.mount('#app')
})

懒加载 router module 样板

// xx_module.js
export default [
 {
  path: '/xx',
  name: 'xx',
  component: () => import('@views/xx/xx.vue'),
  meta: {
    auth: ['user'], // 权限
    router: ['路由文件夹名', 'xxx_router'], // 加载router
    store: ['文件夹名', 'xxx_store'] // 加载store
  }
 }
]

vite moduleArray

// vite list
const moduleArray = import.meta.glob('./module/*.js')

webpack moduleArray

// webpack list
// 获取module文件下子模块内容
const modulesFiles = require.context('./module', true, /\.js$/)
const moduleArray = modulesFiles.keys().reduce((module, modulePath) => {
 const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
 module[moduleName] = modulesFiles(modulePath).default
 return module
}, {})