Vip4.0W/12.vue3/project2/src/views/List.vue

<template>
  <div>
    列表
    <button @click="goHome">去首页</button>
    <nav>
        <!-- query传参 -->
         <!-- 声明式导航 -->
        <RouterLink replace to="/list/demo1?a=1&b=2">男装</RouterLink>
        <RouterLink replace :to="{
            name:'nvzhuang',
            // path:'/list/demo2',
            query:{
                id:1,
                name:'孙悟空1',
                age:18
            }
        }">女装</RouterLink>
        <!-- <RouterLink to="/list/demo2">女装</RouterLink> -->
         <!-- parmas -->
        <RouterLink replace :to="{
            // path:'/list/demo3',
            name:'tongzhuang',
            params:{
                ids:1,
                num:'20'
            }
        }">童装</RouterLink>
        <!-- <RouterLink :to="`/list/demo3/001/002`">童装</RouterLink> -->
    </nav>
    <main>
        <RouterView></RouterView>
    </main>
  </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(-2)
    router.forward();
    // router.back();
}
</script>

<style lang="scss" scoped>
</style>