How to pass URL parameters in router-link in VueJS

Question

I'm trying to send a request to '/trackers/:id/Update' or '/trackers/:id/Delete' from the Trackers page in VueJS, the problem is that my id is in a data called items I'm To get it from my API and store it locally for display, I need to get the {{item.trackerid}} in the target URL, which is "/trackers/:id/Delete". I can't find a way. Can someone tell me the correct path?

TrackersView.vue:

<template>
    <h1>Hello {{name}}</h1>
    <h3>This is your Trackers page</h3>
    <table class="table table-striped">
  <thead>
    <th>Sno</th>
    <th>Tracker name</th>
    <th>Tracker Description</th>
    <th>Tracker settings</th>
    <th>Date Created</th>
    <th>Add tracker log</th>
    <th>Actions</th>
  </thead>
  <tbody>
<tr v-for="item,index in items" :key="index">
                <th>{{index}}</th>
                <th>{{item.trackername}}</th>
                <th>{{item.trackerdesc}}</th>
                <th>{{item.tracker_settings}}</th>
                <th>{{item.datecreated}}</th>
                <th><button class="btn btn-outline-dark">+</button></th>
                <th><button class="btn btn-outline-dark"><router-link :to="{ name: 'tupdate', params : {id : localStorage['id'] } }" style="text-decoration:none; color: black;">Update</router-link></button>
                </th>
                <th>  <button class="btn btn-outline-dark">  <router-link to="/trackers/{{item.trackerid}}/Delete" style="text-decoration:none; color: black;">Delete</router-link></button></th>
                
            </tr>
  </tbody>
</table>


<button class="btn btn-outline-dark" @click="createtracker">Click to add trackers</button>
</template>

<script>
import { useRouter } from 'vue-router';
import axios from 'axios';
export default {
Name: 'TrackersView',
mounted() {
    let id = localStorage['id'] 
    return{
        id,
    }
},
data() {
    return {
        name: localStorage.name,
        items : [],
        
    }
},
methods:{
  getTrackers(){
    const path = 'http://localhost:5000/trackers/'+ localStorage['id'] 
    axios.get(path)
    .then((res) => {
      this.items = res.data.tracker
  })
 
    .catch((err) => console.log(err.response))

    console.log(this.items);
  }
},
setup() {
  const router = useRouter();
  const createtracker = async () => {
    await  router.push({name: 'createtracker',params : {id : localStorage['id']}});
    };
    return{
        createtracker,
    }
},
created() {
  this.getTrackers();
}
}
</script>

<style scoped>
    body {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    height: 100vh;
  }
  
  @keyframes gradient {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
</style>t

The final result is this:

This is the content in localStorage:

Answer 1

The query for the current route is in this.$route.query, if you want to keep it in the destination you can pass the entire query object to another route:

<router-link


:to="{ path: '/', query: $route.query }"
>
  Go There
</router-link>

If you only want to pass specific query parameters:

<router-link
  :to="{ path: '/', query: { myQuery: $route.query.myQuery }}"
>
  Go There
</router-link>