vue3

13.Vue3/my-Router/src/App.vue

@@ -3,9 +3,9 @@
     <h2>路由模块</h2>
     <div class="nav">
       <!-- router-link =>  RouterLink  =>a -->
-      <RouterLink active-class="active" to="/home">首页</RouterLink>
+      <RouterLink replace active-class="active" to="/home">首页</RouterLink>
-      <RouterLink active-class="active" to="/list">列表</RouterLink>
+      <RouterLink replace active-class="active" to="/list">列表</RouterLink>
-      <RouterLink active-class="active" :to="{
+      <RouterLink replace active-class="active" :to="{
         name:'wode'
       }">我的</RouterLink>
     </div>

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

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

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

@@ -1,13 +0,0 @@
-<template>
-  <div>
-    首页
-  </div>
-</template>
-
-<script setup name="Home">
-import { ref, reactive} from 'vue'
-
-</script>
-<style lang='scss' scoped>
-
-</style>

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

@@ -1,47 +1,63 @@
-import {createRouter,createWebHistory,createWebHashHistory} from 'vue-router';
+import {
+  createRouter,
+  createWebHistory,
+  createWebHashHistory,
+} from "vue-router";
 
 // 路由：hash / history
 // 2.页面的引入
-import Home from '@/pages/Home.vue';
+import Home from "../views/Home.vue";
-import List from '@/pages/List.vue';
+import List from "../views/List.vue";
-import My from '@/pages/My.vue';
+import My from "../views/My.vue";
-import Detail from '@/pages/Detail.vue';
+import Detail from "../views/Detail.vue";
 // 1.创建
 const router = createRouter({
-    // 路由是什么版本
+  // 路由是什么版本
-    history:createWebHistory(),
+  history: createWebHistory(),
-    // 路由的格式
+  // 路由的格式
-    routes:[
+  routes: [
-        // 路由重定向
+    // 路由重定向
+    {
+      path: "/",
+      redirect: "/home",
+    },
+    {
+      // 路由的路径
+      path: "/home",
+      // 这个页面用的元素
+      component: Home,
+    },
+    {
+      path: "/list",
+      component: List,
+      children: [
         {
-            path:'/',
+          // 二级或多级 子路由 没有/
-            redirect:'/home'
+          // path: "detail/:id/:user",
+          path:'/detail',
+          component: Detail,
+          name: "xiangqing",
+          // 1.全部接收
+          // props:true,
+          // 2.切换接收方法（默认是params）
+          // props(route) {
+          //   return route.query
+          // }
+          // 3.默认传参
+          props:{
+            user:"我的",
+            id:"0976"
+          }
         },
-        {
+      ],
-            // 路由的路径
+    },
-            path:'/home',
+    {
-            // 这个页面用的元素
+      path: "/my",
-            component:Home
+      component: My,
-        },
+      name: "wode",
-        {
+    },
-            path:'/list',
+  ],
-            component:List,
-            children:[
-                {
-                    // 二级或多级 子路由 没有/
-                    path:'detail/:id/:user',
-                    component:Detail,
-                    name:'xiangqing'
-                }
-            ]
-        },
-        {
-            path:'/my',
-            component:My,
-            name:'wode'
-        }
-    ]
 });
 
 // 抛出
-export default router;
+export default router;

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

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    详情
+    <p>
+      我叫：{{user}},我的id是{{id}}
+      <!-- 我叫：{{params.user}},我的id是{{params.id}} -->
+    </p>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive,toRefs} from 'vue'
+import {useRoute} from 'vue-router';
+import { defineProps } from 'vue';
+// const route = useRoute();
+// console.log(route);
+// let query = toRefs(route.query); X
+// let {params} = toRefs(route);
+// console.log(params);
+defineProps(['user','id'])
+
+</script>
+<style lang='scss' scoped>
+
+</style>

13.Vue3/my-Router/src/views/Home.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    首页
+    <button @click="toInfo">个人信息</button>
+  </div>
+</template>
+
+<script setup name="Home">
+import { ref, reactive} from 'vue';
+import {useRouter} from 'vue-router';
+const router = useRouter();
+function toInfo() {
+  // 跳转
+  router.push('/list');
+  // 自定义跳转
+  // router.go(-2);
+  // // 回退
+  // router.back();
+  // // 前页
+  // router.forward();
+}
+</script>
+<style lang='scss' scoped>
+
+</style>

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

@@ -6,17 +6,22 @@
         <!-- <RouterLink active-class="active" :to="`/list/detail/${item.id}/${item.user}`">{{
           item.name
         }}</RouterLink> -->
-        <RouterLink active-class="active" :to="{
+        <!-- <RouterLink active-class="active" :to="{
           name:'xiangqing',
-          params:{
+          query:{
             id:item.id,
             user: item.user
           }
         }">{{
           item.name
+        }}</RouterLink> -->
+        <RouterLink active-class="active" :to="{
+          name:'xiangqing'}">{{
+          item.name
         }}</RouterLink>
       
       </li>
+      
     </ul>
     <div class="main">
       <RouterView></RouterView>

13.Vue3/路由.md

@@ -37,4 +37,34 @@ to:path/name
 
 ## 12.路由模式
 hash和history
-区别：
+区别：
+hash：
+1.有#号
+2.不需要服务器配置url路径 
+3.刷新会不有404
+4.适合后台管理相关的系统页面
+
+history:
+1.没有#号
+2.需要服务器配置url路径 
+3.刷新会有404
+4.更适合toC端
+
+## 13.了解nanoid 随机生成
+https://blog.csdn.net/weixin_45705239/article/details/139766630
+
+## 14.scss:npm install sass
+
+## 15.路由传参配置
+
+## 16.路由跳转
+声明式导航：<RouterLink></RouterLink>
+编程式导航:useRouter
+
+## 17.router 和 route 区别
+useRoute() => route
+useRouter() => router
+
+## 18.replace与push区别
+
+## 19.keep-alive