web_dist/src/router/createNode.ts

// 1. 用于解决keep-alive需要name的问题，动态生成随机name供keep-alive使用
// 2. 用于解决transition动画内部结点只能为根元素的问题，单文件可写多结点
import {defineComponent, h, createVNode, defineAsyncComponent} from 'vue'
import {useUserStore} from "@/pinia/user-store";

const no404 = defineAsyncComponent(() => import('@/views/system/404.vue'))

export function createNameComponent(component: Promise<any>, componentName: string, needUserInfo = false) {
    return () => {
        return new Promise(async (resolve, reject) => {
            const name = componentName ?? 'vueAdminBox' + Date.now()

            function next() {
                // @ts-ignore
                component().then(async (comm) => {
                    resolve(createBlank(comm.default, name))
                })
            }

            if (needUserInfo) {
                await useUserStore().getUserInfo.then((res) => {
                    if (res) {
                        next();
                    } else {
                        resolve(createBlank(no404, name))
                        return
                    }
                })
            }
            next()
        })
    }
}


function createBlank(defaultComponent: any, name: string) {
    return defineComponent({
        name,
        render() {
            const children = [createVNode(defaultComponent)]
            return h('div', {
                style: {
                    height: '100%',
                    width: '100%'
                }
            }, children)
        },
    })
}