从 url VueJs 获取查询值

Question

我是新的 vuejs 学习者，我想从 url 获取查询值以在 vue 方法中使用它，如下所述。

这是路线：

{
    path: "/FetchData/:query?",
    name: "FetchData",
    component: FetchData,
}

这是重定向到第二页的link

   <router-link :to="{ path: '/FetchData', query: { query: country.countryName }}">

这是api

 public IActionResult GetSubs(string query, int? subs)
    {
        return Ok(SubService.GetSubs(query, subsId));
    }

这是调用api

的vue方法

getSubs() {
            axios.get("https://localhost:44391/api/Subs/GetSubs")
                .then(res => this.subs = res.data)
                .catch(err => console.log(err))
        }

最后，这是 html 显示数据

 <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>

Answer 1

如果您使用的是 vuejs 2，您可以使用以下方式访问查询：this.$route.query
但如果你使用的是 v3，它应该是这样的：

import { useRoute } from 'vue-router'
import { computed } from 'vue';

export default {
  setup() {
    const route = useRoute()

    return {
       query: computed( () => route.query )
    }
  }
}

然后你可以在你的方法中使用this.query

从 url VueJs 获取查询值

get query value from url VueJs

javascript

vue.js

asp.net-core