优化路由

README.md

@@ -33,3 +33,43 @@ npm run build
 ```sh
 npm run lint
 ```
+
+```angular2html
+src
+├─ assets        # 静态资源 (图片、字体、全局样式等)
+│   ├─ images
+│   ├─ icons
+│   └─ styles    # 全局样式（variables.scss, reset.css...）
+│
+├─ components    # 全局通用组件
+│   ├─ common    # 公共基础组件 (按钮、输入框、弹窗...)
+│   ├─ layout    # 页面框架相关组件 (导航栏、侧边栏...)
+│   └─ widgets   # 业务相关的小部件
+│
+├─ layouts       # 页面整体布局 (BasicLayout.vue, BlankLayout.vue...)
+│
+├─ views         # 页面级组件 (对应路由)
+│   ├─ Home
+│   ├─ Login
+│   └─ Dashboard
+│
+├─ router        # 路由配置
+│   └─ index.ts
+│
+├─ stores        # 状态管理 (Pinia / Vuex)
+│   └─ user.ts
+│
+├─ utils         # 工具函数 (request.ts, format.ts...)
+│
+├─ api           # 接口请求 (user.ts, product.ts...)
+│
+├─ models        # 类型声明 (TS 接口 / class)
+│
+├─ hooks         # 自定义 hooks (useAuth.ts, useDarkMode.ts...)
+│
+├─ plugins       # 插件配置 (element-plus.ts, i18n.ts...)
+│
+├─ directives    # 自定义指令 (v-permission.ts...)
+│
+└─ App.vue
+```

src/router/index.js

@@ -1,70 +1,71 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import AboutView from '@/views/AboutView.vue'
-import ToolView from '@/views/ToolView.vue'
-import NewsView from '@/views/NewsView.vue'
-import DefaultLayout from '../layouts/DefaultLayout.vue'
-import LoginLayout from '@/layouts/LoginLayout.vue'
-import LoginView from '@/views/LoginView.vue'
-import HomeView from '@/views/HomeView.vue'
 import { getToken } from '@/utils/auth.js'
-import TestView from '@/views/TestView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
       path: '/',
-      component: DefaultLayout,
+      component: () => import('@/layouts/DefaultLayout.vue'),
       children: [
         {
           path: '',
           name: 'Home',
-          component: HomeView
+          component: () => import('@/views/HomeView.vue')
         },
         {
-          path: '/about',
+          path: 'about',
           name: 'about',
-          component: AboutView
+          component: () => import('@/views/AboutView.vue')
         },
         {
-          path: '/tool',
+          path: 'tool',
           name: 'tool',
-          component: ToolView
+          component: () => import('@/views/ToolView.vue')
         },
         {
-          path: '/news',
+          path: 'news',
           name: 'news',
-          component: NewsView
+          component: () => import('@/views/NewsView.vue'),
+          meta: { requiresAuth: true }
         },
         {
-          path: '/test',
+          path: 'test',
           name: 'test',
-          component: TestView
+          component: () => import('@/views/TestView.vue'),
+          meta: { requiresAuth: true }
         }
       ]
     },
     {
       path: '/login',
-      component: LoginLayout,
+      component: () => import('@/views/LoginView.vue'),
       children: [
         {
           path: '',
           name: 'Login',
-          component: LoginView,
+          component: () => import('@/views/LoginView.vue'),
-          meta: {
+          meta: { requiresGuest: true }
-            requiresAuth: true
-          }
         }
       ]
+    },
+    {
+      path: '/:pathMatch(.*)*',
+      name: 'NotFound',
+      component: () => import('@/views/NotFound.vue')
     }
   ]
 })
 
 router.beforeEach((to, from, next) => {
+  const token  = getToken()
   const requiresAuth = to.matched.some((record) => record.meta.requiresAuth)
+  const requiresGuest = to.matched.some((record) => record.meta.requiresAuth)
 
-  if (!requiresAuth && !getToken()) {
+  if (requiresAuth && !token) {
     next({ path: '/login' })
+  } else if (requiresGuest && !getToken()) {
+    next({ name: 'Home' })
   } else {
     console.log('next')
     next()

src/views/NotFound.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  Page is NotFound!!!
+</template>
+
+<style scoped></style>