first

src/router/index.ts

@@ -0,0 +1,47 @@
+import { createRouter, createWebHashHistory } from 'vue-router'
+import staticRoutes from '@/router/static'
+import { useAdminInfo } from '@/stores/adminInfo'
+import NProgress from 'nprogress'
+import { loading } from '@/utils/loading'
+import { ElMessage } from 'element-plus'
+
+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
+    }
+    if (to.path == '/login' || to.path == '/404') {
+        // 登录或者注册才可以往下进行
+        next()
+    } else {
+        // 获取 token
+        const adminInfo = useAdminInfo()
+        const token = adminInfo.getToken()
+        // token 不存在
+        if (token === null || token === '') {
+            ElMessage.error('您还没有登录，请先登录')
+            next('/login')
+        } else {
+            next()
+        }
+    }
+
+    // next()
+})
+
+// 路由加载后
+router.afterEach(() => {
+    if (window.existLoading) {
+        loading.hide()
+    }
+    NProgress.done()
+})
+
+export default router

src/router/static.ts

@@ -0,0 +1,84 @@
+import type { RouteRecordRaw } from 'vue-router'
+
+const pageTitle = (name: string): string => {
+    return `pagesTitle.${name}`
+}
+/**
+ * 后台基础路由路径
+ */
+export const adminBaseRoutePath = '/admin'
+export const adminBaseRoute = {
+    path: adminBaseRoutePath,
+    name: 'admin',
+    component: () => import('@/layouts/admin/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`
+            }
+        }
+    ]
+}
+
+/*
+ * 静态路由
+ * 自动加载 ./static 目录的所有文件，并 push 到以下数组
+ */
+const staticRoutes: Array<RouteRecordRaw> = [
+    adminBaseRoute,
+    {
+        path: '/',
+        redirect: (to) => {
+            return {
+                name: 'adminMainLoading'
+            }
+        }
+    },
+    {
+        // 管理员登录页 - 不放在 adminBaseRoute.children 因为登录页不需要使用后台的布局
+        path: '/login',
+        name: 'login',
+        component: () => import('@/views/user/login.vue'),
+        meta: {
+            title: pageTitle('login')
+        }
+    },
+    {
+        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
+                    })
+                }
+            }
+        }
+    }
+]
+
+export default staticRoutes