The solution to the problem that vue3 routing parameters are passed only once

I encountered a problem in the project. I found that the routing parameters were only passed once. After printing on the console, I found that the latter parameters were not passed. After searching for a long time on the Internet, I finally found the solution and the problem. The following demonstrates the origin of the problem

<li>
<router-link :to="{name: 'about',params:{id:item.id}}" v-for="item in 3">1</router-link>
</li>
//传值的组件

Here I want to pass the id to query the corresponding page, but found that only 1 can be passed in the past, and the following 2 and 3 cannot be passed. Later, I was reminded by an issue on github because the routing component was reused. To solve this problem, you need to add a watch to listen, see the code:

import {useRoute} from "vue-router"
import {watch,onMounted,ref} from "vue"

const route=useRoute()
let num=ref(1)

onMounted(()=>{
    watch(route,(newval,oldval)=>{
    num.value=route.params.id
    
})


})

In this way, the value can be passed normally, but there is still a problem that the value passed for the first time is empty, and we need to add the two attributes of immediate: true and deep: true. Because route is essentially a proxy object, which requires internal changes in our object, immediate is to perform monitoring immediately and solve the problem of empty values ​​for the first pass.

This solves the title problem. get it done