Como posso buscar parâmetros de consulta no Vue.js?
Por exemplo http://somesite.com?test=yay
.
Não consegue encontrar uma maneira de buscar ou preciso usar JS puro ou alguma biblioteca para isso?
Como posso buscar parâmetros de consulta no Vue.js?
Por exemplo http://somesite.com?test=yay
.
Não consegue encontrar uma maneira de buscar ou preciso usar JS puro ou alguma biblioteca para isso?
Respostas:
De acordo com os documentos do objeto de rota , você tem acesso a um $route
objeto de seus componentes, que expõem o que você precisa. Nesse caso
//from your component
console.log(this.$route.query.test) // outputs 'yay'
vue-router
isso seria de fato uma duplicata, pois ele precisará usar métodos JS padrão.
vue-router
tag e a adicionei.
return next({ name: 'login', query:{param1: "foo" }, });
não funciona. dentro do componente de login, o suporte param1
é indefinido.
Sem vue-route, divida o 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(){
},
Outra solução 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(){
},
location.href
se dividiria quando há location.search
prontamente disponível? developer.mozilla.org/pt-BR/docs/Web/API/… Por exemplo, var querypairs = window.location.search.substr(1).split('&');
dividir os pares nome-valor da consulta por '=' nem sempre funcionará, pois você também pode passar parâmetros de consulta nomeados sem valor; Por exemplo, ?par1=15&par2
seu código agora geraria uma exceção no par2, pois a divisão por '=' resultará em tmp com apenas 1 elemento.
undefined
a getVars['par2']
.
Resposta mais detalhada para ajudar os novatos do VueJS:
E o próprio código:
<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)
},
});
<script src="https://unpkg.com/vue-router"></script>
new Vue({ router, ... })
não é uma sintaxe válida.
Outra maneira (supondo que você esteja usando vue-router
) é mapear o parâmetro de consulta para um suporte no seu roteador. Então você pode tratá-lo como qualquer outro acessório no seu código de componente. Por exemplo, adicione esta rota;
{
path: '/mypage',
name: 'mypage',
component: MyPage,
props: (route) => ({ foo: route.query.foo })
}
Então, no seu componente, você pode adicionar o suporte normalmente;
props: {
foo: {
type: String,
default: null
}
},
Em seguida, ele estará disponível this.foo
e você poderá fazer o que quiser com ele (como definir um inspetor etc.)
Nesta data, a maneira correta de acordo com os documentos de roteamento dinâmico é:
this.$route.params.yourProperty
ao invés de
this.$route.query.yourProperty
query
para obter as consultas do URL. De docs: Além $ route.params, o objeto rota $ também expõe outras informações úteis, como $ route.query (se houver uma consulta no URL)
Você pode usar o vue-router. Tenho um exemplo abaixo:
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()
}
})
Nota: Em beforeRouteEnter
função não podemos acessar as propriedades do componente como: this.propertyName
.que por isso que tenho passar o vm
para next
function.It é a maneira recommented ao acesso vue instance.Actually o vm
que significa, por exemplo, vue
Você pode obter usando esta função.
console.log(this.$route.query.test)
Se o seu servidor usa php, você pode fazer o seguinte:
const from = '<?php echo $_GET["from"];?>';
Apenas funciona.