路由

17.Vue3/project2/package.json

@@ -14,6 +14,7 @@
     "type-check": "vue-tsc --build"
   },
   "dependencies": {
+    "scss": "^0.2.4",
     "vue": "^3.5.26",
     "vue-router": "^4.6.4"
   },

17.Vue3/project2/src/App.vue

@@ -3,11 +3,11 @@
     <h1>App</h1>
     <!-- <router-view></router-view> -->
      <div class="nav">
-      <RouterLink active-class="news" to="/my">我的</RouterLink>
-      <RouterLink active-class="news" :to="{
+      <RouterLink push active-class="news" to="/my">我的</RouterLink>
+      <RouterLink push active-class="news" :to="{
        name:'zhuye'
       }">首页</RouterLink>
-      <RouterLink active-class="news" to="/list">列表</RouterLink>
+      <RouterLink push active-class="news" to="/list">列表</RouterLink>
      </div>
     <RouterView></RouterView>
   </div>

17.Vue3/project2/src/router/index.js

@@ -3,7 +3,12 @@ import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router
 import Home from '../views/Home.vue';
 import List from '../views/List.vue';
 import My from '../views/My.vue';
+
 const routes = [
+    {
+        path: "/",
+        redirect: "/home"
+    },
     {
         path: "/home",
         component: Home,
@@ -12,7 +17,18 @@ const routes = [
     {
         path: "/list",
         component: List,
-        name:'liebiao'
+        name:'liebiao',
+        redirect:'/list/demo2',
+        children:[
+            {
+                path:'demo1',
+                component:()=>import("../views/Demo/Demo1.vue")
+            },
+            {
+                path:'demo2',
+                component:()=>import("../views/Demo/Demo2.vue")
+            },
+        ]
     },
     {
         path: "/my",

17.Vue3/project2/src/views/Demo/Demo1.vue

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

17.Vue3/project2/src/views/Demo/Demo2.vue

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

17.Vue3/project2/src/views/List.vue

@@ -1,11 +1,28 @@
 <template>
-  <div>list</div>
+  <div>
+    <h1>list</h1>
+    <div class="nav">
+        <!-- 声明式导航 -->
+        <RouterLink active-class="old" to="/list/demo1">Demo1</RouterLink>
+        <RouterLink active-class="old" to="/list/demo2">Demo2</RouterLink>
+    </div>
+    <button @click="goHome">回主页</button>
+    <RouterView></RouterView>
+  </div>
 </template>
 
 <script lang="ts" setup>
 import {ref,reactive} from "vue" 
-
+import { RouterLink,RouterView,useRouter} from "vue-router";
+const router = useRouter();
+function goHome() {
+    // router.push('/home');
+    // router.go(-1);
+}
 </script>
 
-<style lang="scss" scoped>
+<style  scoped>
+    .old {
+        color: pink;
+    }
 </style>