vue3

12.vue3/project2/src/App.vue

@@ -2,14 +2,14 @@
   <div>
     <h1>App</h1>
     <nav>
-      <RouterLink active-class="active" :to="{
+      <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>
+      <RouterLink  active-class="active" to="/list">列表</RouterLink>
     </nav>
     <main>
       <RouterView></RouterView>

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

@@ -19,6 +19,10 @@ const router = createRouter({
     history:createWebHistory(),
     // 定义路由表
     routes:[
+        {
+            path:'/',
+            redirect:'/list'
+        },
         {
             path: '/home',
             component: Home,

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

@@ -1,10 +1,12 @@
 <template>
   <div>
     列表
+    <button @click="goHome">去首页</button>
     <nav>
         <!-- query传参 -->
-        <RouterLink to="/list/demo1?a=1&b=2">男装</RouterLink>
-        <RouterLink :to="{
+         <!-- 声明式导航 -->
+        <RouterLink replace to="/list/demo1?a=1&b=2">男装</RouterLink>
+        <RouterLink replace :to="{
             name:'nvzhuang',
             // path:'/list/demo2',
             query:{
@@ -15,7 +17,7 @@
         }">女装</RouterLink>
         <!-- <RouterLink to="/list/demo2">女装</RouterLink> -->
          <!-- parmas -->
-        <RouterLink :to="{
+        <RouterLink replace :to="{
             // path:'/list/demo3',
             name:'tongzhuang',
             params:{
@@ -33,7 +35,15 @@
 
 <script lang="ts" setup>
 import {ref,reactive} from "vue" 
-import { RouterLink, RouterView } from "vue-router";
+import { RouterLink, RouterView,useRouter } from "vue-router";
+// 编程式导航
+const router = useRouter();
+function goHome() {
+    // router.push('/home')
+    // router.go(-2)
+    router.forward();
+    // router.back();
+}
 </script>
 
 <style lang="scss" scoped>