Как сделать активную ссылку по умолчанию со всеми параметрами во vue-router?

Question

MortSith @MortSith

Vue.js

Как сделать активную ссылку по умолчанию со всеми параметрами во vue-router?

ВОТ ссылка в гитхаб
как сделать чтобы при переходе в меню PRODUCT была уже нажата любая кнопка выбора продукта из этих (prod | prod-a| prod-b)
ps: только изучаю vue-router, тыкайте носом в любые ошибки, и еще никак не могу понять как передавать props во vue-router и чем они отличаются от params

а это index.js

import {createRouter, createWebHistory} from 'vue-router'

import Home from '../views/Home.vue'
import About from '../views/About.vue'
import Product from '../views/Product.vue'
import Docs from '../views/Docs.vue'
import Contacts from '../views/Contacts.vue'
import Prod from '../views/prods/Prod.vue'

const routes = [
    {path: '/', name: 'Home', component: Home},
    {path: '/about', name: 'About', component: About},
    {path: '/Product',
        name: 'Product',
        component: Product,
        // redirect: {  name: 'Prod', params:{id:'0'} },
        redirect: '/Product/Prod/0' ,

        children: [
        {
            path: 'Prod/:id',
            component: Prod,
            name: 'Prod',
            props: true
        },
        ]


},
    {path: '/Docs', name: 'Docs', component: Docs},
    {path: '/Contacts', name: 'Contacts', component: Contacts}
]

const router = createRouter({
    history: createWebHistory(),
    routes

})

export default router

а это Product.vue

<script setup>


import Comp1 from '../components/Comp1.vue';

import { useRoute } from 'vue-router'
import { ref, watch } from 'vue'
 const route = useRoute()
  watch(
      () => route.params.id,

    )


const msgArr = {
  
  info: {
    nama: 'feod',
    pro: 'dudec'
  },

  content: {
    color: ['white', 'black', 'zircon', 'crema'],
    weight: 100
  }

};

// const id = route.params.id;



</script>

<template >

  <div class="nav">
    <router-link class="rtl" :to="{
     name: 'Prod',  params: {id : 0,
      msg : (msgArr.info.nama + ' | ' + msgArr.content.color[0]) }
  }">PROD |</router-link>
    <router-link class="rtl" :to="{
      name: 'Prod', params: {id : 1,
      msg : (msgArr.info.nama + ' | ' + msgArr.content.color[1]) }
 }">PROD-a |</router-link>
    <router-link class="rtl" :to="{
      name: 'Prod', params: {id : 2,
      msg : (msgArr.info.nama + ' | ' + msgArr.content.color[2]) }
 }">PROD-b |</router-link>
  </div>

  <!-- <div class="nav">
    <router-link v-for="(item, index) in 3" :key="index" class="rtl" exact
     :to="{
     name: 'Prod',
      params: {id : index,
      msg : (msgArr.info.nama + ' -|- ' + msgArr.content.color[index]) }

      }" >PROD {{item}}| {{item.id}}</router-link>

  </div> -->

    <div class="Product">
      <h1>---Product  </h1>
      <router-view ></router-view>

    </div>

<!-- <Comp1></Comp1> -->
</template>

<style lang="scss">

.rtl{
  color: rgb(17, 22, 97);
  font-weight: 700;
  padding: 6px;
}
.nav{

}
</style>