vue3 编程式导航

<template>
    <h1>shop car {{ $route.params.id }}{{ $route.params.title }}</h1>
    <div class="list">
        <ul>
            <li v-for="item in list.shopcar" :key="item.id" @click="e=>change(item)">
              <h2>名称：{{ item.title }}</h2>
              <h2>价格: {{ item.price }}</h2>
            </li>
        </ul>
    </div>
</template>
<script setup>
import { reactive} from 'vue';
import { useRoute,useRouter } from 'vue-router'
let $route = useRoute();
let $router = useRouter();
console.log($route.params);
let list = reactive({
    shopcar:[
        {
            id:1,
            title:'苹果',
            price:123
        },  {
            id:2,
            title:'波罗蜜',
            price:123
        },  {
            id:3,
            title:'啤梨',
            price:123
        }
    ]
})

const change = ({id,title})=>{
    //编程式导航
    $router.push({
        name:'ShopCar',
        params:{
            id,
            title,
        }
    })
}
</script>
<style scoped>
li{
    margin: 20px;
    background-color: aqua;
}
</style>

const change = ({id,title})=>{
    //编程式导航
    $router.push({
        name:'ShopCar',
        params:{
            id,
            title,
        }
    })
}

可以改变url地址，往数组尾部添加数组，实现路由跳转（可替换）。