How to pass URL parameters in router-link in VueJS - vue.js

Question

I am trying to send a request to '/trackers/:id/Update' or '/trackers/:id/Delete' from my Trackers page in VueJS, the problem is my id is in a data called items which I am fetching from my API and storing it locally for displaying, I need to get that {{item.trackerid}} in my destination URL i.e '/trackers/:id/Delete'. I am unable to find a way. Can somebody show 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 end result is like this:
This is what is present in localStorage:

Answer 1

The current route's query is in this.$route.query and you can pass that entire query object on to another route if you want to preserve it in the destination:
<router-link
:to="{ path: '/', query: $route.query }"
>
Go There
</router-link>
If you only want to pass a specific query param:
<router-link
:to="{ path: '/', query: { myQuery: $route.query.myQuery }}"
>
Go There
</router-link>