如何在VueJS中的router-link中传递URL参数
我正在尝试从 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 中的内容：
