路由

vue3/project4/src/App.vue

@@ -1,5 +1,9 @@
 <template>
   <div>
+    <!-- push / replace -->
+    <RouterLink push to="/home">首页</RouterLink>
+    <RouterLink push to="/list">列表</RouterLink>
+    <RouterLink push to="/my">我的</RouterLink>
     <RouterView></RouterView>
     <!-- newPart
     NewPart -->

vue3/project4/src/router/index.ts

@@ -4,8 +4,8 @@ import type {RouteRecordRaw} from 'vue-router'
 import Home from '@/views/Home.vue';
 import List from '@/views/List.vue';
 import My from '@/views/My.vue';
-import Demo1 from '@/views/Demo1.vue';
-import Demo2 from '@/views/Demo2.vue';
+// import Demo1 from '@/views/Demo1.vue';
+// import Demo2 from '@/views/Demo2.vue';
 
 type RouteType = RouteRecordRaw & {
     children?: RouteType[]
@@ -31,14 +31,14 @@ const routes:RouteType[] = [
             {
                 path: 'demo1',
                 // path: 'demo1/:id/:user/:sex',
-                component: Demo1,
+                component: ()=>import("../views/Demo1.vue"),
                 
             },
             {
                 // path: 'demo2/:id/:user/:sex',
                 path: 'demo2',
                 name:'dier',
-                component: Demo2
+                component: ()=>import("../views/Demo2.vue"),
             }
         ]
     },

vue3/project4/src/views/Home.vue

@@ -1,10 +1,26 @@
 <template>
-  <div>首页</div>
+  <div>
+    <h1>首页</h1>
+    <button @click="goToMy">我的页面</button>
+  </div>
 </template>
 
 <script lang="ts" setup>
 import {ref,reactive} from "vue" 
-
+import { useRouter } from "vue-router";
+const router = useRouter();
+function goToMy() {
+    // 编程式导航
+    router.push({
+        path:'/my',
+        query:{
+            id:"你好"
+        }
+    })
+    // router.go(1)
+    // router.back();
+    // router.forward()
+}
 </script>
 
 <style lang="scss" scoped>