javascript - Hvordan kan jeg hente spørringsparametere fra en URL i Vue.js?

Hvordan kan jeg hente spørringsparametere i Vue.js?

F.eks.

http://somesite.com?test=yay

Finner ikke en måte å hente på, eller må jeg bruke ren JS eller et bibliotek for dette?

Svar #1

I følge dokumentasjonen for ruteobjektet, har du tilgang til et $route-objekt fra komponentene dine, som viser det du trenger. I dette tilfellet

// from your component
console.log(this.$route.query.test) // outputs 'yay'

Svar #2

Prøv denne koden

var vm = new Vue({
  created() {
    let urlParams = new URLSearchParams(window.location.search);
    console.log(urlParams.has('yourParam')); // true
    console.log(urlParams.get('yourParam')); // "MyParam"
  },
});

Svar #3

Uten vue-router, del URL-en

var vm = new Vue({
  ....
  created() {
    let uri = window.location.href.split('?');
    if(uri.length == 2) {
      let vars = uri[1].split('&');
      let getVars = {};
      let tmp = '';
      vars.forEach(function(v) {
        tmp = v.split('=');
        if(tmp.length == 2)
          getVars[tmp[0]] = tmp[1];
      });
      console.log(getVars);
      // do 
    }
  },
  updated() {
  },
....

En annen løsning https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/search:

var vm = new Vue({
  ....
  created() {
    let uri = window.location.search.substring(1); 
    let params = new URLSearchParams(uri);
    console.log(params.get("var_name"));
  },
  updated() {
  },
....

Svar #4

Mer detaljert svar for å hjelpe nybegynnere i VueJS:

  • Definer først router-objektet ditt, velg modusen du synes passer. Du kan deklarere rutene dine inne i rutelisten.
  • Neste vil du at hovedappen din skal vite at ruteren eksisterer, så erklær den inne i hovedapp-deklarasjonen.
  • Til slutt holder $route-instansen all informasjon om den nåværende ruten. Koden vil logge til konsollen bare parameteren som ble sendt i URL-en. (*Mounted er lik document.ready, dvs. det kalles så snart appen er klar)

Og selve koden:

<script src="https://unpkg.com/vue-router"></script>
var router = new VueRouter({
    mode: 'history',
    routes: []
});
var vm =  new Vue({
    router,
    el: '#app',
    mounted: function() {
        q = this.$route.query.q
        console.log(q)
    },
});

Svar #5

En annen måte (forutsatt at du bruker vue-router), er å kartlegge spørringsparameteren til en prop i ruteren din. Deretter kan du behandle den som enhver annen prop i komponentkoden din. For eksempel, legg til denne ruten;

{ 
  path: '/mypage', 
  name: 'mypage', 
  component: MyPage, 
  props: (route) => ({ foo: route.query.foo }),  
}

Deretter kan du i komponenten din legge til prop-en som vanlig;

props: {
  foo: {
    type: String,
    default: null,
  }
},

Da vil det være tilgjengelig som this.foo, og du kan gjøre hva du vil med det (som å sette en watcher osv.)

Svar #6

Vue 3 Komposisjons-API

(så langt nå 2021, vue-router 4)

import {useRoute} from "vue-router";

//can use only in setup()
useRoute().query.test

eller

//somewhere in your src files
import router from "~/router";

//can use everywhere 
router.currentRoute.value.query.test

eller

import {useRouter} from "vue-router";

//can use only in setup()
useRouter().currentRoute.value.query.test

Svar #7

Per dags dato er den riktige måten ifølge dokumentasjonen for dynamisk ruting:

this.$route.params.yourProperty

i stedet for

this.$route.query.yourProperty

Relaterte artikler