I'm new vuejs learner and I want to get the query value from url to use it in the vue method as explained below.
This is the route:
{
path: "/FetchData/:query?",
name: "FetchData",
component: FetchData,
}
And this is the link to redirect to the second page
<router-link :to="{ path: '/FetchData', query: { query: country.countryName }}">
this is the api
public IActionResult GetSubs(string query, int? subs)
{
return Ok(SubService.GetSubs(query, subsId));
}
This is the vue method calling the api
getSubs() {
axios.get("https://localhost:44391/api/Subs/GetSubs")
.then(res => this.subs = res.data)
.catch(err => console.log(err))
}
And finally, this is the html to display data
<div class="d-flex flex-row mb-3">
<div class="d-flex flex-column ml-2"><span>{{subs.subsId}}</span></div>
</div>
<h6 style="text-align:left">{{subs.label}}</h6>
if you're using vuejs 2 you can access query using: this.$route.query
but if you're using v3 it should be something like:
import { useRoute } from 'vue-router'
import { computed } from 'vue';
export default {
setup() {
const route = useRoute()
return {
query: computed( () => route.query )
}
}
}
then you can use this.query inside your method