vue3

12.vue3/project2/src/router/index.js

@@ -1,6 +1,9 @@
 import {createRouter,createWebHistory,createWebHashHistory} from 'vue-router';
 import Home from '../views/Home.vue';
 import List from '../views/List.vue';
+import Demo1 from '../views/Demo1.vue';
+import Demo2 from '../views/Demo2.vue';
+import Demo3 from '../views/Demo3.vue';
 /**
  * hash history区别
  * 1.hash:路径中包含# #后的内容不会发送到服务器上
@@ -21,8 +24,23 @@ const router = createRouter({
             component: Home,
             name:'wode'
         }, {
+            //  /list/demo1
             path: '/list',
-            component: List
+            component: List,
+            children: [
+                {
+                    path: 'demo1',
+                    component: Demo1
+                },
+                {
+                    path: 'demo2',
+                    component: Demo2
+                },
+                {
+                    path: 'demo3',
+                    component: Demo3
+                }
+            ]
         }
     ]
 })

12.vue3/project2/src/views/Demo1.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>男装</div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive} from "vue" 
+
+</script>
+
+<style lang="scss" scoped>
+</style>

12.vue3/project2/src/views/Demo2.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>女装</div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive} from "vue" 
+
+</script>
+
+<style lang="scss" scoped>
+</style>

12.vue3/project2/src/views/Demo3.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>童装</div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive} from "vue" 
+
+</script>
+
+<style lang="scss" scoped>
+</style>

12.vue3/project2/src/views/List.vue

@@ -1,12 +1,20 @@
 <template>
   <div>
     列表
+    <nav>
+        <RouterLink to="/list/demo1">男装</RouterLink>
+        <RouterLink to="/list/demo2">女装</RouterLink>
+        <RouterLink to="/list/demo3">童装</RouterLink>
+    </nav>
+    <main>
+        <RouterView></RouterView>
+    </main>
   </div>
 </template>
 
 <script lang="ts" setup>
 import {ref,reactive} from "vue" 
-
+import { RouterLink, RouterView } from "vue-router";
 </script>
 
 <style lang="scss" scoped>