feat: 添加路由

src/App.vue

@@ -1,6 +1,4 @@
-<script setup lang="ts">
-import HelloWorld from './components/HelloWorld.vue'
-</script>
+<script setup lang="ts"></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']