vue3

12.vue3/project2/src/App.vue

@@ -1,6 +1,16 @@
 <template>
   <div>
     <h1>App</h1>
+    <nav>
+      <RouterLink active-class="active" :to="{
+        name: 'wode'
+      }">首页</RouterLink>
+      <!-- <RouterLink active-class="active" :to="{
+        path:'/home'
+      }">首页</RouterLink> -->
+      <!-- <RouterLink to="/home">首页</RouterLink> -->
+      <RouterLink active-class="active" to="/list">列表</RouterLink>
+    </nav>
     <main>
       <RouterView></RouterView>
     </main>
@@ -12,5 +22,8 @@ import {ref,reactive} from "vue"
 import {RouterView,RouterLink} from 'vue-router';
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
+.active {
+  color: red;
+}
 </style>

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

@@ -18,7 +18,8 @@ const router = createRouter({
     routes:[
         {
             path: '/home',
-            component: Home
+            component: Home,
+            name:'wode'
         }, {
             path: '/list',
             component: List