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?
javascript
vue.js
vue-router
url-parameters
Obrabować
źródło
źródło
Odpowiedzi:
Zgodnie z dokumentacją obiektu trasy masz dostęp do
$route
obiektu ze swoich komponentów, które ujawniają to, czego potrzebujesz. W tym przypadkuźródło
vue-router
to rzeczywiście byłby duplikatem, ponieważ będzie musiał użyć standardowych metod JS.vue-router
tag i dodałem go.return next({ name: 'login', query:{param1: "foo" }, });
nie działa. wewnątrz komponentu logowania propparam1
jest niezdefiniowany.Bez vue-route podziel adres URL
Inne rozwiązanie https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/search :
źródło
location.href
skoro jestlocation.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&par2
Twój kod zgłosi teraz wyjątek na par2, ponieważ dzielenie przez „=” spowoduje, że tmp będzie zawierał tylko 1 element.undefined
dogetVars['par2']
.Bardziej szczegółowa odpowiedź, aby pomóc początkującym w VueJS:
I sam kod:
źródło
<script src="https://unpkg.com/vue-router"></script>
new Vue({ router, ... })
nie jest poprawną składnią.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ę;Następnie w swoim komponencie możesz dodać rekwizyt jak zwykle;
Wtedy będzie dostępny jako
this.foo
i możesz zrobić z nim wszystko, co chcesz (np. Ustawić obserwatora itp.)źródło
Według tej daty poprawnym sposobem według dynamicznych dokumentów routingu jest:
zamiast
źródło
query
aby 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)URL:
www.example.com?name=john&lastName=doe
Uwaga: W
beforeRouteEnter
funkcji nie możemy uzyskać dostępu do właściwości komponentu, takich jakthis.propertyName
:. Dlatego przekazałem funkcjęvm
do.next
Jest to zalecany sposób dostępu do instancji vue. Właściwievm
to oznacza instancję vueźródło
Jeśli Twój adres URL wygląda mniej więcej tak:
Gdzie „123” to parametr o nazwie „id” (adres URL taki jak / coś /: id), spróbuj użyć:
źródło
Możesz uzyskać korzystając z tej funkcji.
źródło
Jeśli twój serwer używa php, możesz to zrobić:
Po prostu działa.
źródło