vue3

vue3/my-Router/src/pages/Detail.vue

@@ -2,23 +2,23 @@
   <div class="detail">
     <h2>详情信息</h2>
     <ol>
-        <li>游戏名:{{route.params.name}}</li>
-        <li>用户名:{{route.params.user}}</li>
-        <li>用户密码:{{route.params.password}}</li>
+        <li>游戏名:{{name}}</li>
+        <li>用户名:{{user}}</li>
+        <li>用户密码:{{password}}</li>
     </ol>
   </div>
 </template>
 
 <script setup name="Detail" lang="ts">
 // route router
-import {useRoute} from 'vue-router';
-import {toRefs} from 'vue';
-let route = useRoute();
-console.log(route.params)
+// import {useRoute} from 'vue-router';
+// import {toRefs} from 'vue';
+// let route = useRoute();
+// console.log(route.params)
 // console.log(route.query)
 // let query = toRefs(route.query)
 // console.log(query)
-
+defineProps(['name','user','password'])
 </script>
 
 <style>

vue3/my-Router/src/pages/Home.vue

@@ -1,14 +1,19 @@
 <template>
-    <div class="home">
-        我是首页
-    </div>
+  <div class="home">我是首页</div>
 </template>
 
 <script lang="ts" setup name="Home">
-
+import {onMounted} from 'vue';
+import { useRouter } from "vue-router";
+let router = useRouter();
+// 编程式导航 useRouter useRoute
+onMounted(() => {
+  setTimeout(() => {
+    // push 有历史记录
+    // replace 无法跳回
+    // router.replace("/my");
+  }, 3000);
+});
 </script>
 
-<style lang="scss" scoped>
-
-
-</style>
+<style lang="scss" scoped></style>

vue3/my-Router/src/router/index.ts

@@ -6,8 +6,13 @@ import My from '@/pages/My.vue';
 import Detail from '@/pages/Detail.vue'
 // 创建
 const router = createRouter({
-    history: createWebHashHistory(),
+    history: createWebHistory(),
     routes:[
+        {
+            path:'/',
+            // 路由重定向
+            redirect:'/home'
+        },
         {
             path:'/home',
             component:Home
@@ -21,7 +26,19 @@ const router = createRouter({
                     name:'details',
                     // params传参
                     path:'detail/:id/:name/:user/:password',
-                    component:Detail
+                    component:Detail,
+                    // 第一种 全部接收
+                    props:true
+                    // 第二种
+                    // props(route) {
+                    //     return route.params
+                    // }
+                    // 第三种
+                    // props:{
+                    //     name:"哎呀",
+                    //     user:"哈哈哈",
+                    //     password:"632763726"
+                    // }
                 }
             ]
         },