Jak mogę uzyskać parametry zapytania z adresu URL w Vue.js?

251

Jak mogę pobrać parametry zapytania w Vue.js?

Np http://somesite.com?test=yay.

Nie możesz znaleźć sposobu na pobranie lub czy muszę do tego użyć czystego JS lub biblioteki?

Obrabować
źródło
5
Dlaczego to przegłosowano? Potrzebuję go do Vue.js. Jeśli jest jakaś biblioteka vue lub coś w niej wbudowanego, byłoby preferowane nad surowym js.
Rob
Prawdopodobnie jest coś w Vue Router, który to robi, jeśli tego używasz.
Joe Clay,
54
Nie ma nawet blisko duplikatu. vue.js to framework o specyficznej logice, inny niż vanila javascript
Yerko Palma
13
Jak można tego dokonać bez routera Vue?
Connor Leech,

Odpowiedzi:

345

Zgodnie z dokumentacją obiektu trasy masz dostęp do $routeobiektu ze swoich komponentów, które ujawniają to, czego potrzebujesz. W tym przypadku

//from your component
console.log(this.$route.query.test) // outputs 'yay'
Yerko Palma
źródło
8
Tak! Jeśli nie używa, vue-routerto rzeczywiście byłby duplikatem, ponieważ będzie musiał użyć standardowych metod JS.
Jeff
1
Po prostu zakładam, że ponieważ ten sam użytkownik napisał tuż przed pytaniem o vue-router, stworzyłbym tag vue-router, gdybym miał taką reputację
Yerko Palma
2
Słuszna uwaga! Poszedłem dalej, stworzyłem vue-routertag i dodałem go.
Jeff
Problem polega na tym, że w dokumentacji Vue połączenie komponentów z routerem jest niepożądane. Zalecają przekazywanie rekwizytów, ale nie wydaje się możliwe dynamiczne przekazywanie par zapytania jako rekwizytów. Na przykład przedtem Każdy strażnik robiąc coś takiego return next({ name: 'login', query:{param1: "foo" }, });nie działa. wewnątrz komponentu logowania prop param1jest niezdefiniowany.
hraynaud,
45

Bez vue-route podziel adres URL

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(){
  },

Inne rozwiązanie 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(){
  },
erajuan
źródło
2
Dlaczego miałbyś się dzielić, location.hrefskoro jest location.searchłatwo dostępny? developer.mozilla.org/en-US/docs/Web/API/… np. var querypairs = window.location.search.substr(1).split('&');Dzielenie par nazwa-wartość zapytania przez „=” nie zawsze będzie działać, ponieważ można przekazać parametry nazwanego zapytania również bez wartości; np. ?par1=15&par2Twój kod zgłosi teraz wyjątek na par2, ponieważ dzielenie przez „=” spowoduje, że tmp będzie zawierał tylko 1 element.
Arthur
1
Przepraszam, nie rzuciłbym wyjątku, ale nie złapałbyś również par2. Jak w zasadzie przypisujesz undefineddo getVars['par2'].
Arthur
metoda GET to ciąg znaków (pary nazwa / wartość) w adresie URL
erajuan
@Arthur masz rację, dodałem sprawdzanie poprawności i dodałem inne rozwiązania. dziękuję
erajuan
37

Bardziej szczegółowa odpowiedź, aby pomóc początkującym w VueJS:

  • Najpierw zdefiniuj obiekt routera, wybierz odpowiedni tryb. Możesz zadeklarować swoje trasy na liście tras.
  • Następnie chcesz, aby Twoja główna aplikacja wiedziała, że ​​router istnieje, więc zadeklaruj go w deklaracji głównej aplikacji.
  • Wreszcie instancja $ route zawiera wszystkie informacje o bieżącej trasie. Kod będzie logował do konsoli tylko parametr przekazany w adresie URL. (* Zamontowany jest podobny do document.ready, .ie jest wywoływany, gdy tylko aplikacja będzie gotowa)

I sam kod:

<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)
    },
});
Sabyasachi
źródło
7
Wyjaśnij to
Muhammad Muazzam
Najpierw zdefiniuj obiekt routera, wybierz odpowiedni tryb. Możesz zadeklarować swoje trasy na liście tras. Następnie chcesz, aby Twoja główna aplikacja wiedziała, że ​​router istnieje, więc zadeklaruj go w deklaracji głównej aplikacji. Wreszcie instancja $ route zawiera wszystkie informacje o bieżącej trasie. Mój kod będzie logował do konsoli tylko parametr przekazany w adresie URL. (* Zamontowany jest podobny do document.ready, .ie jest wywoływany, gdy tylko aplikacja będzie gotowa)
Sabyasachi
3
Jeszcze bardziej nieświadomi nowicjusze: VueRouter nie jest zawarty w rdzeniu VueJS, więc możesz chcieć dołączyć VueRouter osobno:<script src="https://unpkg.com/vue-router"></script>
rustyx
2
@Sabyasachi Edytuj swoją odpowiedź i dodaj tę informację w samym poście.
Simon Forsberg
1
new Vue({ router, ... })nie jest poprawną składnią.
Crescent Fresh
17

Innym sposobem (zakładając, że używasz vue-router) jest odwzorowanie parametru zapytania na rekwizyt w routerze. Następnie możesz traktować go jak każdy inny rekwizyt w kodzie komponentu. Na przykład dodaj tę trasę;

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

Następnie w swoim komponencie możesz dodać rekwizyt jak zwykle;

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

Wtedy będzie dostępny jako this.fooi możesz zrobić z nim wszystko, co chcesz (np. Ustawić obserwatora itp.)

Mike P.
źródło
To jest świetne. Brakującym elementem układanki jest inicjacja. Możesz to zrobić w następujący sposób: `this. $ Router.push ({name: 'mypage', query: {foo: 'bar'})`
slf
7

Według tej daty poprawnym sposobem według dynamicznych dokumentów routingu jest:

this.$route.params.yourProperty

zamiast

this.$route.query.yourProperty
Marco
źródło
3
To nie to samo! Powinieneś użyć, queryaby uzyskać zapytania z adresu URL. Z dokumentacji: Oprócz $ route.params obiekt $ route udostępnia także inne przydatne informacje, takie jak $ route.query (jeśli zapytanie zawiera adres URL)
hatef 13.09.19
Dzięki za wyjaśnienie :)
Marco,
2

Możesz użyć vue-routera. Mam przykład poniżej:

URL: www.example.com?name=john&lastName=doe

new Vue({
  el: "#app",
  data: {
    name: '',
    lastName: ''
  },
  beforeRouteEnter(to, from, next) {
      if(Object.keys(to.query).length !== 0) { //if the url has query (?query)
        next(vm => {
         vm.name = to.query.name
         vm.lastName = to.query.lastName
       })
    }
    next()
  }
})

Uwaga: W beforeRouteEnterfunkcji nie możemy uzyskać dostępu do właściwości komponentu, takich jak this.propertyName:. Dlatego przekazałem funkcję vmdo. nextJest to zalecany sposób dostępu do instancji vue. Właściwie vmto oznacza instancję vue

roli roli
źródło
2

Jeśli Twój adres URL wygląda mniej więcej tak:

somesite.com/something/123

Gdzie „123” to parametr o nazwie „id” (adres URL taki jak / coś /: id), spróbuj użyć:

this.$route.params.id
trishke
źródło
1

Możesz uzyskać korzystając z tej funkcji.

console.log(this.$route.query.test)
Revati Raman
źródło
-6

Jeśli twój serwer używa php, możesz to zrobić:

const from = '<?php echo $_GET["from"];?>';

Po prostu działa.

Cao Shouguang
źródło
2
Pytanie brzmiało: jak zrobić coś z Vue, a nie z PHP.
robertmain