路由

20.vue3/project2/package.json

@@ -11,6 +11,7 @@
     "type-check": "vue-tsc --build"
   },
   "dependencies": {
+    "sass": "^1.101.0",
     "vue": "^3.5.38",
     "vue-router": "^5.2.0"
   },

20.vue3/project2/src/App.vue

@@ -1,47 +1,43 @@
-<script setup lang="ts">
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
-</script>
-
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
+  <div>
+    <div class="nav">
+      <RouterLink active-class="active" to="/home">主页</RouterLink>
+      <RouterLink
+        active-class="active"
+        :to="{
+          path: '/list',
+        }"
+        >列表</RouterLink
+      >
+      <RouterLink
+        active-class="active"
+        :to="{
+          name: 'wode',
+        }"
+        >我的</RouterLink
+      >
     </div>
-  </header>
-
-  <main>
-    <TheWelcome />
-  </main>
+    <RouterView></RouterView>
+  </div>
 </template>
 
-<style scoped>
-header {
-  line-height: 1.5;
-}
-
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
-
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
-
-  .logo {
-    margin: 0 2rem 0 0;
-  }
+<script lang="ts" setup>
+import { ref, reactive } from "vue";
+import { RouterView, RouterLink } from "vue-router";
+</script>
 
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
+<style lang="scss" scoped>
+.nav {
+  width: 500px;
+  display: flex;
+  justify-content: space-around;
+  a {
+    color: #000;
+    font-size: 24px;
+    text-decoration: none;
   }
 }
+.active {
+  color: #f00 !important;
+}
 </style>

20.vue3/project2/src/main.ts

@@ -1,4 +1,4 @@
-import './assets/main.css'
+// import './assets/main.css'
 import router from './router'
 import { createApp } from 'vue'
 import App from './App.vue'

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

@@ -24,11 +24,24 @@ const router = createRouter({
         },
         {
             path: '/list',
-            component: List
+            component: List,
+            children: [
+                {
+                    // /list/demo1
+                    path: 'demo1',
+                    // 路由懒加载
+                    component: () => import('@/views/Demo1.vue')
+                },
+                {
+                    path: 'demo2',
+                    component: () => import('@/views/Demo2.vue')
+                }
+            ]
         },
         {
             path: '/my',
-            component: My
+            component: My,
+            name: 'wode'
         }
     ]
 })

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

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

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

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

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

@@ -1,5 +1,12 @@
 <template>
-  <div>列表</div>
+  <div>
+    <h1>列表</h1>
+    <div class="nav">
+      <RouterLink to="/list/demo1">Demo1</RouterLink>
+      <RouterLink to="/list/demo2">Demo2</RouterLink>
+    </div>
+    <RouterView></RouterView>
+  </div>
 </template>
 
 <script lang="ts" setup>