如何在VueJS中的router-link中傳遞URL參數

Question

我正在嘗試從VueJS 中的Trackers 頁面向'/trackers/:id/Update' 或'/trackers/:id/Delete' 發送請求，問題是我的id 位於一個名為items 的資料中我正在從我的API 取得並將其儲存在本機以供顯示，我需要在目標URL 中取得{{item.trackerid}}，即「/trackers/:id/Delete」。我找不到方法。有人可以告訴我正確的路徑嗎？

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

最終結果是這樣的：

這是 localStorage 中的內容：

Answer 1

目前路線的查詢位於 this.$route.query 中，如果您想將其保留在目的地中，您可以將整個查詢物件傳遞到另一個路線：

<router-link


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

如果您只想傳遞特定的查詢參數：

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