Vue use route params for axios get request-CodePudding

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 ?

CodePudding user response：

This should be this.$route.params.name inside the script.

const res = await axios.get(`http://localhost:3004/tests`,{ params: this.$route.params.name });

CodePudding user response：

Router.js const routes = [ { path: 'path/:name', name: 'Name', component: ComponentName, } ]

CodePudding user response：

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} });