shop-admin/src/router/index.js

import { createRouter, createWebHistory } from 'vue-router';

// 全局路由
export const globalRoutes = [
    {
        path: '/login',
        name: 'Login',
        component: () => import('@/views/global/login.vue'),
        meta: {
            global: true,
        },
    },
    {
        path: '/404',
        name: '404',
        component: () => import('@/views/global/404.vue'),
        meta: {
            global: true,
        },
    },
];

// 示例模块
import demoModule from './demo';
export const demeRoutes = import.meta.env.DEV ? demoModule : [];

// 动态模块
const dynamicRoutes = [];
const modules = import.meta.globEager('./modules/*.js');
Object.values(modules).forEach((mod) => {
    dynamicRoutes.push(...mod.default);
});

// 本地路由
export const routes = [
    ...globalRoutes,
    {
        path: '/',
        name: 'App',
        redirect: { name: 'Home' },
        component: () => import('@/layouts/default.vue'),
        meta: {
            layout: true,
        },
        children: [
            {
                path: '/home',
                name: 'Home',
                component: () => import('@/views/home/index.vue'),
                meta: {
                    title: '首页',
                    icon: 'home-fill',
                },
            },
        ],
    },
    ...dynamicRoutes,
    {
        path: '/:pathMatch(.*)*',
        redirect: '/404',
        name: 'NotFound',
        meta: {
            global: true,
        },
    },
];

import config from '@/configs';

const router = createRouter({
    history: createWebHistory(),
    routes: config.useLocalRouter ? routes : [],
});

import store from '@/store';
router.onError((error, to) => {
    console.info('[router] error', error, to);
});
router.beforeEach(async (to, from, next) => {
    if (!from.matched.length) {
        store.loadCache();
    }
    if (store.state.local.token) {
        if (!store.state.auth.permission.length) {
            if (config.useLocalRouter) {
                store.commit('auth/setPermission', routes);
            } else {
                await store.dispatch('auth/getUserInfo');
                await store.dispatch('auth/getPermission');
            }
            next({ ...to, replace: true });
        } else {
            console.info(`[router] from ${from.name} to ${to.name}`);
            const deep = (route) => {
                let child = (route.children || []).find((item) => !item.meta?.hidden);
                return child?.children?.length ? deep(child?.children) : child?.name;
            };
            let childName = deep([...to.matched].pop());
            if (childName) {
                next({ name: childName });
            } else {
                next();
                store.commit('layout/setActiveAside', to.matched.find((item) => !item.meta?.layout).name);
                store.commit('layout/setActiveMenu', to.name);
                store.commit('layout/setActiveTab', to.name);
                store.commit('layout/setBreakcrumbList', to.matched);
                store.commit('layout/addTab', to);
            }
        }
    } else if (to.meta.global) {
        next();
    } else {
        next({ name: 'Login' });
    }
});

export default router;

export const reset = (routers) => {
    router.getRoutes().forEach((item) => {
        router.removeRoute(item.name);
    });
    routers = [
        ...globalRoutes,
        ...routers,
        {
            path: '/:pathMatch(.*)*',
            redirect: '/404',
            name: 'NotFound',
            meta: {
                global: true,
            },
        },
    ];
    routers.forEach(router.addRoute);
    console.info('[router] reset', router.getRoutes());
};