fix user page router BUG, fix top bar router BUG

server/index.js

@@ -220,6 +220,68 @@ const topics = [
   },
 ]
 
+// 模拟用户数据
+const users = [
+  {
+    registrationSequence: 1,
+    username: 'KUN',
+    email: 'kun@kungal.com',
+    token: 'KUNGalgame',
+    avatar: './assets/images/KUN.jpg',
+    registrationTime: Date.now(),
+    moemoepoint: 1007,
+    bio: '鲲最可爱！',
+    likesCount: 1007,
+    commentsCount: 50,
+    repliesCount: 20,
+    likedTopicsCount: 5,
+    repliedTopicsCount: 1007,
+    pushedTopicsCount: 3,
+    userTopics: {
+      likedTopicIds: [1, 2, 3],
+      repliedTopicIds: [4, 5],
+      pushedTopicIds: [6, 7, 8],
+    },
+    publishedCommentsCount: 10,
+    publishedCommentIds: [1, 2, 3, 4, 5],
+  },
+  {
+    registrationSequence: 2,
+    username: 'YUYU',
+    email: 'yuyu@kungal.com',
+    token: 'azkhx',
+    avatar: './assets/images/topic.jpg',
+    registrationTime: Date.now(),
+    cutePoints: 11000,
+    bio: '啊这可海星',
+    likesCount: 1007,
+    commentsCount: 20,
+    repliesCount: 10,
+    likedTopicsCount: 2,
+    repliedTopicsCount: 1007,
+    pushedTopicsCount: 1,
+    userTopics: {
+      likedTopicIds: [9, 10],
+      repliedTopicIds: [11],
+      pushedTopicIds: [12],
+    },
+    publishedCommentsCount: 5,
+    publishedCommentIds: [6, 7, 8, 9, 10],
+  },
+]
+
+// 定义用户JSON数据的路由
+app.get('/kungalgamer/:id', (req, res) => {
+  const userId = parseInt(req.params.id)
+  const user = users.find((user) => user.registrationSequence === userId)
+
+  if (!user) {
+    res.status(404).json({ error: 'User not found' })
+  } else {
+    res.json(user)
+  }
+})
+
 // 获取指定帖子的路由
 app.get('/topic/:id', (req, res) => {
   const topicId = parseInt(req.params.id)

src/components/KUNGalgameTopBar.vue

@@ -28,12 +28,12 @@ interface topBar {
   router: string
 }
 
-// 顶部导航栏的项目
+// 顶部导航栏的项目（这里一定要加上 '/' 不然子路由会出问题！！！）
 const topBarItem: topBar[] = [
   { index: 1, name: 'pool', router: '/pool' },
-  { index: 2, name: 'create', router: 'edit' },
-  { index: 3, name: 'technique', router: 'technique' },
-  { index: 4, name: 'about', router: 'kungalgame' },
+  { index: 2, name: 'create', router: '/edit' },
+  { index: 3, name: 'technique', router: '/technique' },
+  { index: 4, name: 'about', router: '/kungalgame' },
   { index: 5, name: 'return', router: '/' },
 ]
 

src/hooks/useBackgroundPicture.ts

@@ -20,9 +20,9 @@ export const currBackground = computed(() => {
   ) {
     return 'none'
   } else if (showKUNGalgameBackground.value === '1007') {
-    return `url(${showKUNGalgameCustomBackground.value})`
+    return `/url(${showKUNGalgameCustomBackground.value})`
   } else {
     // TODO: 替换为后端接口
-    return `url(src/assets/images/bg/bg${showKUNGalgameBackground.value}.png)`
+    return `url(/src/assets/images/bg/bg${showKUNGalgameBackground.value}.png)`
   }
 })

src/router/guard/permission.ts

@@ -15,14 +15,14 @@ export const createPermission = (router: Router) => {
     const getRoute = asyncRoutes
 
     // 白名单
-    if (to.name && WHITE_LIST.includes(<string>to.name)) {
+    if (to.name && WHITE_LIST.includes(to.name as string)) {
       next()
       return
     }
 
     // 没有token
     if (!unref(token)) {
-      if (!to?.meta?.permission && getRoute.length > 0) {
+      if (!to.meta?.permission && getRoute.length > 0) {
         next()
         return
       }
@@ -41,7 +41,7 @@ export const createPermission = (router: Router) => {
 
     // 是否已经挂载过路由
     if (getRoute.length > 0) {
-      if (router.hasRoute(<string>to.name)) {
+      if (router.hasRoute(to.name as string)) {
         next()
       } else {
         next(getRoute[0])
@@ -54,8 +54,6 @@ export const createPermission = (router: Router) => {
       router.addRoute(route)
     })
 
-    console.log(routeList)
-
     let redirectPath = (from.query.redirect || to.path) as string
     if (redirectPath === '/') {
       redirectPath = routeList[0].path

src/router/modules/kungalgamer.ts

@@ -6,6 +6,7 @@ const kungalgamer: KUNRouteType[] = [
     name: 'KUNGalgamer',
     path: '/kungalgamer',
     component: () => import('@/views/kungalgamer/KUNGalgamer.vue'),
+    redirect: '/kungalgamer/info',
     meta: {
       permission: 'kungalgamer',
       title: '用户页',

src/router/types.ts

@@ -14,7 +14,7 @@ export interface MetaType extends RouteMeta {
 }
 
 export interface KUNRouteType extends Omit<RouteRecordRaw, 'props'> {
-  name: string
+  name?: string
   component?: Component | string
   components?: Component
   children?: KUNRouteType[]

src/views/kungalgamer/KUNGalgamer.vue

@@ -32,8 +32,10 @@ import { currBackground } from '@/hooks/useBackgroundPicture'
         <div class="nav">
           <!-- 交互区的单个项目 -->
           <ul>
-            <li>个人信息</li>
-            <li>邮箱密码</li>
+            <li><RouterLink to="/kungalgamer/info">个人信息</RouterLink></li>
+            <li>
+              <RouterLink to="/kungalgamer/password">邮箱密码</RouterLink>
+            </li>
             <li>发过的贴</li>
             <li>回过的贴</li>
             <li>赞过的帖</li>