feat: add vue-router el-menu demo

Author: YunYouJun

package.json

@@ -15,7 +15,8 @@
     "@element-plus/icons-vue": "^2.3.1",
     "@vueuse/core": "^11.3.0",
     "element-plus": "^2.8.8",
-    "vue": "^3.5.13"
+    "vue": "^3.5.13",
+    "vue-router": "^4.4.5"
   },
   "devDependencies": {
     "@iconify-json/ep": "^1.2.1",
@@ -25,6 +26,7 @@
     "typescript": "^5.6.3",
     "unocss": "^0.64.1",
     "unplugin-vue-components": "^0.27.4",
+    "unplugin-vue-router": "^0.10.8",
     "vite": "^5.4.11",
     "vite-ssg": "^0.24.1",
     "vue-tsc": "^2.1.10"

pnpm-lock.yaml

@@ -4,8 +4,7 @@
     <div class="flex main-container">
       <BaseSide />
       <div w="full" py="4">
-        <Logos my="4" />
-        <HelloWorld msg="Hello Vue 3 + Element Plus + Vite" />
+        <RouterView />
       </div>
     </div>
   </el-config-provider>

src/App.vue

@@ -22,5 +22,7 @@ declare module 'vue' {
     ElTag: typeof import('element-plus/es')['ElTag']
     HelloWorld: typeof import('./components/HelloWorld.vue')['default']
     Logos: typeof import('./components/Logos.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
   }
 }

src/components.d.ts

@@ -1,5 +1,24 @@
+<script lang="ts" setup>
+import { ref } from "vue";
+import {
+  Location,
+  Document,
+  Menu as IconMenu,
+  Setting,
+} from "@element-plus/icons-vue";
+
+const isCollapse = ref(true);
+const handleOpen = (key: string, keyPath: string[]) => {
+  console.log(key, keyPath);
+};
+const handleClose = (key: string, keyPath: string[]) => {
+  console.log(key, keyPath);
+};
+</script>
+
 <template>
   <el-menu
+    router
     default-active="1"
     class="el-menu-vertical-demo"
     @open="handleOpen"
@@ -25,7 +44,7 @@
         <el-menu-item index="1-4-1">item one</el-menu-item>
       </el-sub-menu>
     </el-sub-menu>
-    <el-menu-item index="2">
+    <el-menu-item index="/nav/2">
       <el-icon>
         <IconMenu />
       </el-icon>
@@ -37,7 +56,7 @@
       </el-icon>
       <template #title>Navigator Three</template>
     </el-menu-item>
-    <el-menu-item index="4">
+    <el-menu-item index="/nav/4">
       <el-icon>
         <Setting />
       </el-icon>
@@ -46,20 +65,3 @@
   </el-menu>
 </template>
 
-<script lang="ts" setup>
-import { ref } from "vue";
-import {
-  Location,
-  Document,
-  Menu as IconMenu,
-  Setting,
-} from "@element-plus/icons-vue";
-
-const isCollapse = ref(true);
-const handleOpen = (key: string, keyPath: string[]) => {
-  console.log(key, keyPath);
-};
-const handleClose = (key: string, keyPath: string[]) => {
-  console.log(key, keyPath);
-};
-</script>

src/components/layouts/BaseSide.vue

@@ -15,6 +15,13 @@ import "uno.css";
 // If you want to use ElMessage, import it.
 import "element-plus/theme-chalk/src/message.scss";
 
+import { createRouter, createWebHistory } from 'vue-router'
+import { routes } from 'vue-router/auto-routes'
+
 const app = createApp(App);
+app.use(createRouter({
+  history: createWebHistory(),
+  routes,
+}))
 // app.use(ElementPlus);
 app.mount("#app");

src/main.ts

@@ -0,0 +1,4 @@
+<template>
+  <Logos my="4" />
+  <HelloWorld msg="Hello Vue 3 + Element Plus + Vite" />
+</template>