项目初始化

web/src/router/index.ts

@@ -0,0 +1,81 @@
+import { createRouter, createWebHashHistory } from 'vue-router'
+import NProgress from 'nprogress'
+import 'nprogress/nprogress.css'
+import staticRoutes from '/@/router/static'
+import { adminBaseRoutePath } from '/@/router/static/adminBase'
+import { loading } from '/@/utils/loading'
+import langAutoLoadMap from '/@/lang/autoload'
+import { mergeMessage } from '/@/lang/index'
+import { useConfig } from '/@/stores/config'
+import { isAdminApp } from '/@/utils/common'
+import { uniq } from 'lodash-es'
+
+const router = createRouter({
+    history: createWebHashHistory(),
+    routes: staticRoutes,
+})
+
+router.beforeEach((to, from, next) => {
+    NProgress.configure({ showSpinner: false })
+    NProgress.start()
+    if (!window.existLoading) {
+        loading.show()
+        window.existLoading = true
+    }
+
+    // 按需动态加载页面的语言包-start
+    let loadPath: string[] = []
+    const config = useConfig()
+    if (to.path in langAutoLoadMap) {
+        loadPath.push(...langAutoLoadMap[to.path as keyof typeof langAutoLoadMap])
+    }
+    let prefix = ''
+    if (isAdminApp(to.fullPath)) {
+        prefix = './backend/' + config.lang.defaultLang
+
+        // 去除 path 中的 /admin
+        const adminPath = to.path.slice(to.path.indexOf(adminBaseRoutePath) + adminBaseRoutePath.length)
+        if (adminPath) loadPath.push(prefix + adminPath + '.ts')
+    } else {
+        prefix = './frontend/' + config.lang.defaultLang
+        loadPath.push(prefix + to.path + '.ts')
+    }
+
+    // 根据路由 name 加载的语言包
+    if (to.name) {
+        loadPath.push(prefix + '/' + to.name.toString() + '.ts')
+    }
+
+    if (!window.loadLangHandle.publicMessageLoaded) window.loadLangHandle.publicMessageLoaded = []
+    const publicMessagePath = prefix + '.ts'
+    if (!window.loadLangHandle.publicMessageLoaded.includes(publicMessagePath)) {
+        loadPath.push(publicMessagePath)
+        window.loadLangHandle.publicMessageLoaded.push(publicMessagePath)
+    }
+
+    // 去重
+    loadPath = uniq(loadPath)
+
+    for (const key in loadPath) {
+        loadPath[key] = loadPath[key].replaceAll('${lang}', config.lang.defaultLang)
+        if (loadPath[key] in window.loadLangHandle) {
+            window.loadLangHandle[loadPath[key]]().then((res: { default: anyObj }) => {
+                const pathName = loadPath[key].slice(loadPath[key].lastIndexOf(prefix) + (prefix.length + 1), loadPath[key].lastIndexOf('.'))
+                mergeMessage(res.default, pathName)
+            })
+        }
+    }
+    // 动态加载语言包-end
+
+    next()
+})
+
+// 路由加载后
+router.afterEach(() => {
+    if (window.existLoading) {
+        loading.hide()
+    }
+    NProgress.done()
+})
+
+export default router

web/src/router/static.ts

@@ -0,0 +1,100 @@
+import type { RouteRecordRaw } from 'vue-router'
+import { adminBaseRoutePath } from '/@/router/static/adminBase'
+import { memberCenterBaseRoutePath } from '/@/router/static/memberCenterBase'
+
+const pageTitle = (name: string): string => {
+    return `pagesTitle.${name}`
+}
+
+/*
+ * 静态路由
+ * 自动加载 ./static 目录的所有文件，并 push 到以下数组
+ */
+const staticRoutes: Array<RouteRecordRaw> = [
+    {
+        // 首页
+        path: '/',
+        name: '/',
+        component: () => import('/@/views/frontend/index.vue'),
+        meta: {
+            title: pageTitle('home'),
+        },
+    },
+    {
+        // 管理员登录页 - 不放在 adminBaseRoute.children 因为登录页不需要使用后台的布局
+        path: adminBaseRoutePath + '/login',
+        name: 'adminLogin',
+        component: () => import('/@/views/backend/login.vue'),
+        meta: {
+            title: pageTitle('adminLogin'),
+        },
+    },
+    {
+        // 会员登录页
+        path: memberCenterBaseRoutePath + '/login',
+        name: 'userLogin',
+        component: () => import('/@/views/frontend/user/login.vue'),
+        meta: {
+            title: pageTitle('userLogin'),
+        },
+    },
+    {
+        path: '/:path(.*)*',
+        redirect: '/404',
+    },
+    {
+        // 404
+        path: '/404',
+        name: 'notFound',
+        component: () => import('/@/views/common/error/404.vue'),
+        meta: {
+            title: pageTitle('notFound'), // 页面不存在
+        },
+    },
+    {
+        // 后台找不到页面了-可能是路由未加载上
+        path: adminBaseRoutePath + ':path(.*)*',
+        redirect: (to) => {
+            return {
+                name: 'adminMainLoading',
+                params: {
+                    to: JSON.stringify({
+                        path: to.path,
+                        query: to.query,
+                    }),
+                },
+            }
+        },
+    },
+    {
+        // 会员中心找不到页面了
+        path: memberCenterBaseRoutePath + ':path(.*)*',
+        redirect: (to) => {
+            return {
+                name: 'userMainLoading',
+                params: {
+                    to: JSON.stringify({
+                        path: to.path,
+                        query: to.query,
+                    }),
+                },
+            }
+        },
+    },
+    {
+        // 无权限访问
+        path: '/401',
+        name: 'noPower',
+        component: () => import('/@/views/common/error/401.vue'),
+        meta: {
+            title: pageTitle('noPower'),
+        },
+    },
+]
+
+const staticFiles: Record<string, Record<string, RouteRecordRaw>> = import.meta.glob('./static/*.ts', { eager: true })
+for (const key in staticFiles) {
+    if (staticFiles[key].default) staticRoutes.push(staticFiles[key].default)
+}
+
+export default staticRoutes

web/src/router/static/adminBase.ts

@@ -0,0 +1,33 @@
+import type { RouteRecordRaw } from 'vue-router'
+
+/**
+ * 后台基础路由路径
+ * 您可以随时于后台->系统配置中修改此值，程序可自动完成代码修改，同时建立对应的API入口和禁止admin应用访问
+ */
+export const adminBaseRoutePath = '/admin'
+
+/*
+ * 后台基础静态路由
+ */
+const adminBaseRoute: RouteRecordRaw = {
+    path: adminBaseRoutePath,
+    name: 'admin',
+    component: () => import('/@/layouts/backend/index.vue'),
+    // 直接重定向到 loading 路由
+    redirect: adminBaseRoutePath + '/loading',
+    meta: {
+        title: `pagesTitle.admin`,
+    },
+    children: [
+        {
+            path: 'loading/:to?',
+            name: 'adminMainLoading',
+            component: () => import('/@/layouts/common/components/loading.vue'),
+            meta: {
+                title: `pagesTitle.loading`,
+            },
+        },
+    ],
+}
+
+export default adminBaseRoute

web/src/router/static/memberCenterBase.ts

@@ -0,0 +1,32 @@
+import type { RouteRecordRaw } from 'vue-router'
+
+/**
+ * 会员中心基础路由路径
+ */
+export const memberCenterBaseRoutePath = '/user'
+
+/*
+ * 会员中心基础静态路由
+ */
+const memberCenterBaseRoute: RouteRecordRaw = {
+    path: memberCenterBaseRoutePath,
+    name: 'user',
+    component: () => import('/@/layouts/frontend/user.vue'),
+    // 重定向到 loading 路由
+    redirect: memberCenterBaseRoutePath + '/loading',
+    meta: {
+        title: `pagesTitle.user`,
+    },
+    children: [
+        {
+            path: 'loading/:to?',
+            name: 'userMainLoading',
+            component: () => import('/@/layouts/common/components/loading.vue'),
+            meta: {
+                title: `pagesTitle.loading`,
+            },
+        },
+    ],
+}
+
+export default memberCenterBaseRoute