vue3

13.Vue3/my-Router/package.json

@@ -11,6 +11,7 @@
     "type-check": "vue-tsc --build"
   },
   "dependencies": {
+    "nanoid": "^5.1.3",
     "sass": "^1.85.1",
     "vite-plugin-vue-setup-extend": "^0.4.0",
     "vue": "^3.5.13",

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

@@ -5,7 +5,9 @@
       <!-- router-link =>  RouterLink  =>a -->
       <RouterLink active-class="active" to="/home">首页</RouterLink>
       <RouterLink active-class="active" to="/list">列表</RouterLink>
-      <RouterLink active-class="active" to="/my">我的</RouterLink>
+      <RouterLink active-class="active" :to="{
+        name:'wode'
+      }">我的</RouterLink>
     </div>
     <!-- 占位符 -->
     <div class="main">

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

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    详情
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive} from 'vue'
+
+</script>
+<style lang='scss' scoped>
+
+</style>

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

@@ -1,13 +1,54 @@
 <template>
-    <div>
-      列表
+  <div class="list">
+    <ul>
+      <li v-for="(item, index) in list" :key="index">
+        <RouterLink active-class="active" to="/list/detail">{{
+          item.name
+        }}</RouterLink>
+      </li>
+    </ul>
+    <div class="main">
+      <RouterView></RouterView>
     </div>
-  </template>
-  
-  <script setup name="List">
-  import { ref, reactive} from 'vue'
-  
-  </script>
-  <style lang='scss' scoped>
-  
-  </style>
+  </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

@@ -5,7 +5,7 @@ import {createRouter,createWebHistory,createWebHashHistory} from 'vue-router';
 import Home from '@/pages/Home.vue';
 import List from '@/pages/List.vue';
 import My from '@/pages/My.vue';
-
+import Detail from '@/pages/Detail.vue';
 // 1.创建
 const router = createRouter({
     // 路由是什么版本
@@ -25,11 +25,19 @@ const router = createRouter({
         },
         {
             path:'/list',
-            component:List
+            component:List,
+            children:[
+                {
+                    // 二级或多级 子路由 没有/
+                    path:'detail',
+                    component:Detail
+                }
+            ]
         },
         {
             path:'/my',
-            component:My
+            component:My,
+            name:'wode'
         }
     ]
 });