So I'm building my first vue project and I've been trying to pass route parameters to an axios get request and it's not working. this is the code for the page, it gets rendered after the user clicks on a dynamic link in a table of tests
<template>
<v-app>
<app-navbar />
<v-main>
<h3>test {{$route.params.name}}, {{$route.query.status}},{{$route.query.tag}}</h3>
<h3>{{items}}</h3>
</v-main>
</v-app>
</template>
<script>
import appNavbar from '../../../components/appNavbar.vue';
import axios from "axios";
export default {
components : {appNavbar},
name: "App",
data() {
return {
items: [],
};
},
async created() {
try {
const res = await axios.get(`http://localhost:3004/tests`,{ params: $route.params.name });
this.items = res.data;
} catch (error) {
console.log(error);
}
},
};
</script>
<style lang="scss" scoped>
</style>
how can i pass the route params to the axios get function ?
This should be this.$route.params.name inside the script.
const res = await axios.get(`http://localhost:3004/tests`,{ params: this.$route.params.name });
Router.js const routes = [ { path: 'path/:name', name: 'Name', component: ComponentName, } ]
I used @Nitheesh solution I just had to specify the parameter name and it worked perfectly Solution:
const res = await axios.get(`http://localhost:3004/tests`,{ params: {name:this.$route.params.name} });