feat: 添加路由

.nvmrc

@@ -0,0 +1 @@
+22

package.json

@@ -11,7 +11,8 @@
   "dependencies": {
     "element-plus": "^2.8.1",
     "vue": "^3.4.37",
-    "vue-i18n": "^9.14.0"
+    "vue-i18n": "^9.14.0",
+    "vue-router": "^4.4.3"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.1.2",

pnpm-lock.yaml

@@ -17,6 +17,9 @@ importers:
       vue-i18n:
         specifier: ^9.14.0
         version: 9.14.0(vue@3.5.2(typescript@5.5.4))
+      vue-router:
+        specifier: ^4.4.3
+        version: 4.4.3(vue@3.5.2(typescript@5.5.4))
     devDependencies:
       '@vitejs/plugin-vue':
         specifier: ^5.1.2
@@ -752,6 +755,11 @@ packages:
     peerDependencies:
       vue: ^3.0.0
 
+  vue-router@4.4.3:
+    resolution: {integrity: sha512-sv6wmNKx2j3aqJQDMxLFzs/u/mjA9Z5LCgy6BE0f7yFWMjrPLnS/sPNn8ARY/FXw6byV18EFutn5lTO6+UsV5A==}
+    peerDependencies:
+      vue: ^3.2.0
+
   vue-tsc@2.1.6:
     resolution: {integrity: sha512-f98dyZp5FOukcYmbFpuSCJ4Z0vHSOSmxGttZJCsFeX0M4w/Rsq0s4uKXjcSRsZqsRgQa6z7SfuO+y0HVICE57Q==}
     hasBin: true
@@ -1426,6 +1434,11 @@ snapshots:
       '@vue/devtools-api': 6.6.3
       vue: 3.5.2(typescript@5.5.4)
 
+  vue-router@4.4.3(vue@3.5.2(typescript@5.5.4)):
+    dependencies:
+      '@vue/devtools-api': 6.6.3
+      vue: 3.5.2(typescript@5.5.4)
+
   vue-tsc@2.1.6(typescript@5.5.4):
     dependencies:
       '@volar/typescript': 2.4.2

src/App.vue

@@ -1,6 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts"></script>
-import HelloWorld from './components/HelloWorld.vue'
-</script>
 
 <template>
   <div>
@@ -11,7 +9,10 @@ import HelloWorld from './components/HelloWorld.vue'
       <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
     </a>
   </div>
-  <HelloWorld msg="Vite + Vue" />
+  <RouterLink to="/">Go to Home</RouterLink>
+
+  <RouterLink to="/about">Go to About</RouterLink>
+  <RouterView />
 </template>
 
 <style scoped>

src/components/Demo.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts"></script>
+
+<template>
+  <el-button>我是 ElButton</el-button>
+  <RouterLink to="/">Go to Home</RouterLink>
+
+  <RouterLink to="/about">Go to About</RouterLink>
+</template>
+
+<style scoped>
+.read-the-docs {
+  color: #888;
+}
+</style>

src/main.ts

@@ -1,6 +1,8 @@
 import { createApp } from 'vue';
 import { createI18n } from 'vue-i18n';
+import { createMemoryHistory, createRouter } from 'vue-router';
 import App from './App.vue';
+import HelloWorld from './components/HelloWorld.vue';
 import './style.css';
 const i18n = createI18n({
   locale: 'zh',
@@ -18,7 +20,20 @@ const i18n = createI18n({
     },
   },
 });
+
+const routes = [
+  { path: '/', component: App },
+  { path: '/about', component: HelloWorld },
+];
+
+const router = createRouter({
+  history: createMemoryHistory(),
+  routes,
+});
 const app = createApp(App);
 
 app.use(i18n);
+
+app.use(router);
+
 app.mount('#app');

src/types/auto-import-components.d.ts

@@ -7,6 +7,8 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    copy: typeof import('./../components/HelloWorld copy.vue')['default']
+    Demo: typeof import('./../components/Demo.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
     HelloWorld: typeof import('./../components/HelloWorld.vue')['default']
     SelectLanguage: typeof import('./../components/SelectLanguage.vue')['default']