get query value from url VueJs-CodePudding

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 >
                        <div ><span>{{subs.subsId}}</span></div>
                    </div>
                    <h6 style="text-align:left">{{subs.label}}</h6>

CodePudding user response：

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