ThinkAdmin/static/app.js

;(async () => {

    /*! 项目应用根路径 */
    window.appRoot = document.querySelector('script[src*="app.js"]').src.split('/').slice(3, -2).join('/') + '/';

    /*! 模块加载请求处理 */
    const options = {
        // 模块缓存
        moduleCache: {vue: Vue, less: less},
        // 动态加载文件
        getFile(url) {
            if (!(/^(https?:)?\/\//)) {
                url = (appRoot + url).replace(/\/+.?\/+/g, '/');
            }
            return fetch(url).then(res => {
                if (res.ok) {
                    return {getContentData: binary => binary ? res.arrayBuffer() : res.text()};
                } else if (res.status === 404) {
                    return `<template><el-empty description="${res.status}，${res.statusText}">${url}</el-empty></template>`;
                } else {
                    throw Object.assign(new Error(url + ' ' + res.statusText), {res});
                }
            });
        },
        // 追加样式HTML
        addStyle(style) {
            const before = document.head.getElementsByTagName('style')[0] || null;
            const object = Object.assign(document.createElement('style'), {textContent: style});
            document.head.insertBefore(object, before);
        },
        // 输出日志信息
        log(type, ...args) {
            console.log(type, ...args);
        },
    };

    const {loadModule} = window['vue3-sfc-loader'];
    const loadVue = (vuePath) => loadModule(vuePath, options);

    const router = VueRouter.createRouter({
        routes: [], history: VueRouter.createWebHashHistory(),
    });

    // 创建后台主路由
    router.addRoute({
        name: 'layout', path: '/', component: () => {
            return loadVue('/static/template/layout.vue');
        }, children: [{path: '/', redirect: '/static/template/login.vue'},]
    });

    // 动态注销路由
    router.afterEach(function (to) {
        let name = to.fullPath.replace(/[.\/]+/g, '_');
        if (router.hasRoute(name)) router.removeRoute(name)
        if (loading) loading = loading.close(), null;
        document.querySelectorAll('.think-page-loader').forEach((el) => el.style.display = 'none');
    });

    // 动态注册路由
    let loading = null;
    router.beforeEach(function (to, fr, next) {
        let name = to.fullPath.replace(/[.\/]+/g, '_');
        if (router.hasRoute(name)) {
            console.log('PAGE-LOADING:', to.fullPath)
            loading = ElementPlus.ElLoading.service({
                lock: true, text: 'Loading', background: 'rgba(0, 0, 0, 0.3)',
            });
            next();
        } else {
            // 删除页面缓存
            delete options.moduleCache[to.fullPath];
            // 登录页面处理
            if (to.fullPath.indexOf('/login.vue') > -1) {
                router.addRoute({name: name, path: to.fullPath, component: () => loadVue(to.fullPath)})
            } else {
                // 动态注册路由并触发新路由
                router.addRoute('layout', {name: name, path: to.fullPath, component: () => loadVue(to.fullPath)});
            }
            next({name: name});
        }
    });

    // 创建 Vue 应用
    const app = Vue.createApp({});
    app.directive('href', {
        mounted(el, binding) {
            console.log(el)
            el.addEventListener('click', (e) => {
                e.stopPropagation();
                if (binding.value) {
                    router.push(binding.value);
                }
            }, {passive: false})
        },
        unmounted(el) {
            // 移除点击事件监听器
            el.removeEventListener('click');
        }
    })


    // 定义全局缓存，加载字体组件
    app.cache = {loadOpt: options, loadVue: loadVue, icons: ElementPlusIconsVue};
    for (let i in app.cache.icons) app.component(i, app.cache.icons[i]);

    // 注册 getApp 获取应用
    window.getApp = () => app;

    // 应用组件及路由
    app.use(ElementPlus).use(router).mount(document.body);

})().catch(ex => console.error(ex));