Así que estoy construyendo mi primer proyecto vue y he estado tratando de pasar parámetros de ruta a una solicitud de obtención de axios y no funciona. este es el código de la página, se procesa después de que el usuario hace clic en un enlace dinámico en una tabla de pruebas
<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>¿Cómo puedo pasar los parámetros de ruta a la función de obtención de axios?
Debería ser this.$route.params.name dentro del script.
const res = await axios.get(`http://localhost:3004/tests`,{ params: this.$route.params.name });Router.js const rutas = [ { ruta: 'ruta/:nombre', nombre: 'Nombre', componente: ComponentName, } ]
Usé la solución @Nitheesh. Solo tenía que especificar el nombre del parámetro y funcionó perfectamente. Solución:
const res = await axios.get(`http://localhost:3004/tests`,{ params: {name:this.$route.params.name} });