改进 菜单

src/components/Container.vue

@@ -3,17 +3,22 @@ import {NIcon, NLayout, NLayoutSider, NMenu} from "naive-ui"
 import {RouterView} from "vue-router"
 import type { MenuOption } from 'naive-ui'
 import { RouterLink } from 'vue-router'
-import {type Component, defineComponent, h} from 'vue'
+import {type Component, computed, type ComputedRef, h, reactive, ref, toRef} from 'vue'
 import {
   BookOutline as BookIcon,
   PersonOutline as PersonIcon,
   WineOutline as WineIcon,
   HomeOutline as HomeIcon
 } from '@vicons/ionicons5'
+import router from "@/router";
 function renderIcon (icon: Component) {
   return () => h(NIcon, null, { default: () => h(icon) })
 }
 
+const selectedKey: any = computed(() => {
+  return router.currentRoute.value.name
+})
+
 const menuOptions: MenuOption[] = [
   {
     label: () =>
@@ -21,15 +26,12 @@ const menuOptions: MenuOption[] = [
             RouterLink,
             {
               to: {
-                name: 'home',
+                name: 'manage.index',
-                params: {
-                  lang: 'zh-CN'
-                }
               }
             },
             { default: () => '回家' }
         ),
-    key: 'go-back-home',
+    key: 'manage.index',
     icon: renderIcon(HomeIcon)
   },
   {
@@ -41,94 +43,14 @@ const menuOptions: MenuOption[] = [
       }
     }
   },
-  {
+
-    label: () =>
-        h(
-            'a',
-            {
-              href: 'https://baike.baidu.com/item/%E4%B8%94%E5%90%AC%E9%A3%8E%E5%90%9F',
-              target: '_blank',
-              rel: 'noopenner noreferrer'
-            },
-            '且听风吟'
-        ),
-    key: 'hear-the-wind-sing',
-    icon: renderIcon(BookIcon)
-  },
-  {
-    label: '1973年的弹珠玩具',
-    key: 'pinball-1973',
-    icon: renderIcon(BookIcon),
-    disabled: true,
-    children: [
-      {
-        label: '鼠',
-        key: 'rat'
-      }
-    ]
-  },
-  {
-    label: '寻羊冒险记',
-    key: 'a-wild-sheep-chase',
-    icon: renderIcon(BookIcon),
-    disabled: true
-  },
-  {
-    label: '舞，舞，舞',
-    key: 'dance-dance-dance',
-    icon: renderIcon(BookIcon),
-    children: [
-      {
-        type: 'group',
-        label: '人物',
-        key: 'people',
-        children: [
-          {
-            label: '叙事者',
-            key: 'narrator',
-            icon: renderIcon(PersonIcon)
-          },
-          {
-            label: '羊男',
-            key: 'sheep-man',
-            icon: renderIcon(PersonIcon)
-          }
-        ]
-      },
-      {
-        label: '饮品',
-        key: 'beverage',
-        icon: renderIcon(WineIcon),
-        children: [
-          {
-            label: '威士忌',
-            key: 'whisky'
-          }
-        ]
-      },
-      {
-        label: '食物',
-        key: 'food',
-        children: [
-          {
-            label: '三明治',
-            key: 'sandwich'
-          }
-        ]
-      },
-      {
-        label: '过去增多，未来减少',
-        key: 'the-past-increases-the-future-recedes'
-      }
-    ]
-  }
 ]
 </script>
 
 <template>
   <n-layout has-sider class="min-h-screen">
     <n-layout-sider>
-      <n-menu :options="menuOptions" />
+      <n-menu :options="menuOptions" :value="selectedKey" />
     </n-layout-sider>
     <n-layout embedded  :native-scrollbar="false"
                content-style="padding: 24px;padding-top: 10px" class="min-h-screen">

src/router/index.ts

@@ -22,4 +22,13 @@ const router = createRouter({
   ]
 })
 
+router.beforeEach((to, from, next) => {
+  console.log(to.name)
+  if (to.name === 'auth.login' && localStorage.getItem('token')) {
+    next({ name: 'manage.index' })
+  } else {
+    next()
+  }
+})
+
 export default router