vue3

13.Vue3/my-Router/src/pages/Detail.vue

@@ -2,7 +2,7 @@
   <div>
     详情
     <p>
-        我叫：{{query.user}},我的id是{{query.id}}
+        我叫：{{params.user}},我的id是{{params.id}}
     </p>
   </div>
 </template>
@@ -11,12 +11,10 @@
 import { ref, reactive,toRefs} from 'vue'
 import {useRoute} from 'vue-router';
 const route = useRoute();
-// console.log(route);
+console.log(route);
 // let query = toRefs(route.query); X
-let {query} = toRefs(route);
-console.log(query);
-// console.log(user)
-// let user = toRefs(query)
+let {params} = toRefs(route);
+console.log(params);
 </script>
 <style lang='scss' scoped>
 

13.Vue3/my-Router/src/pages/List.vue

@@ -2,28 +2,20 @@
   <div class="list">
     <ul>
       <li v-for="(item, index) in list" :key="index">
-        <!-- query传参  -->
-        <RouterLink active-class="active" :to="`/list/detail?id=${item.id}&user=${item.user}`">{{
-          item.name
-        }}</RouterLink>
-        <!-- <RouterLink active-class="active" :to="{
-          path:'/list/detail',
-          query:{
-            id:item.id,
-            user:item.user
-          }
-        }">{{
+        <!-- params传参  -->
+        <!-- <RouterLink active-class="active" :to="`/list/detail/${item.id}/${item.user}`">{{
           item.name
         }}</RouterLink> -->
-        <!-- <RouterLink :to="{
+        <RouterLink active-class="active" :to="{
           name:'xiangqing',
-          query:{
+          params:{
             id:item.id,
-            user:item.user
+            user: item.user
           }
         }">{{
           item.name
-        }}</RouterLink> -->
+        }}</RouterLink>
+      
       </li>
     </ul>
     <div class="main">
@@ -46,6 +38,7 @@ let list = [
 ];
 console.log(list, "list");
 </script>
+
 <style lang="scss" scoped>
 a {
   text-decoration: none;

13.Vue3/my-Router/src/query传参/1.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="list">
+    <ul>
+      <li v-for="(item, index) in list" :key="index">
+        <!-- query传参  -->
+        <RouterLink
+          active-class="active"
+          :to="`/list/detail?id=${item.id}&user=${item.user}`"
+          >{{ item.name }}</RouterLink
+        >
+        <!-- <RouterLink active-class="active" :to="{
+            path:'/list/detail',
+            query:{
+              id:item.id,
+              user:item.user
+            }
+          }">{{
+            item.name
+          }}</RouterLink> -->
+        <!-- <RouterLink :to="{
+            name:'xiangqing',
+            query:{
+              id:item.id,
+              user:item.user
+            }
+          }">{{
+            item.name
+          }}</RouterLink> -->
+      </li>
+    </ul>
+    <div class="main">
+      <RouterView></RouterView>
+    </div>
+  </div>
+</template>
+
+<script setup name="List">
+import { ref, reactive } from "vue";
+import { RouterLink, RouterView } from "vue-router";
+import { nanoid } from "nanoid";
+let list = [
+  { id: nanoid(10), name: "愤怒的小鸟", user: "小艾", password: "123456" },
+  { id: nanoid(10), name: "植物大战僵尸", user: "小赵", password: "999999" },
+  { id: nanoid(10), name: "超级马里奥", user: "小玉", password: "888888" },
+  { id: nanoid(10), name: "黄金矿工", user: "小段", password: "999999" },
+  { id: nanoid(10), name: "森林冰火人", user: "小郑", password: "000000" },
+  { id: nanoid(10), name: "赛尔号", user: "小马", password: "666666" },
+];
+console.log(list, "list");
+</script>
+<style lang="scss" scoped>
+a {
+  text-decoration: none;
+  color: #000;
+}
+.list {
+  display: flex;
+  .main {
+    flex: 1;
+    padding: 15px;
+    margin-left: 20px;
+  }
+}
+
+.active {
+  color: purple !important;
+}
+ul {
+  width: 150px;
+  list-style: none;
+  li {
+    padding: 15px 0;
+  }
+  border-right: 1px solid #000;
+}
+</style>

13.Vue3/my-Router/src/router/index.ts

@@ -29,7 +29,7 @@ const router = createRouter({
             children:[
                 {
                     // 二级或多级 子路由 没有/
-                    path:'detail',
+                    path:'detail/:id/:user',
                     component:Detail,
                     name:'xiangqing'
                 }

13.Vue3/路由.md

@@ -15,3 +15,26 @@ main.ts页面
 1.在views文件夹内穿件页面
 2.在路由也配置：
 a.引入路由创建方法：createHistory
+
+## 5.使用：RouterLink 占位 
+to:path/name
+
+## 6.路由重定向
+
+## 7.二级路由/多级
+
+## 8.query传参
+
+## 9.params传参
+
+
+## 10.接收参数
+
+
+## 11.params与query区别
+1.接收参数字段不同
+2.动态跳转时 对象写法 params只能使用name跳转 query则都可以
+
+## 12.路由模式
+hash和history
+区别：