Como posso obter parâmetros de consulta de um URL no Vue.js?


251

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?


5
Por que isso está sendo votado? Eu preciso disso para Vue.js. Se houver alguma biblioteca vue ou algo embutido, ela será preferida a js brutos.
Rob

Provavelmente há algo no Vue Router que faz isso, se você estiver usando isso.
Joe Clay

54
Não há nem perto de uma duplicata. vue.js é um quadro com uma lógica específica, diferente de vanila javascript
Yerko Palma

13
Como isso pode ser feito sem o vue-router?
Connor Sanguessuga

Respostas:


345

De acordo com os documentos do objeto de rota , você tem acesso a um $routeobjeto de seus componentes, que expõem o que você precisa. Nesse caso

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

8
Sim! Se ele não estiver usando, vue-routerisso seria de fato uma duplicata, pois ele precisará usar métodos JS padrão.
10136 Jeff

1
Eu apenas supor que porque o mesmo usuário postou pouco antes de uma pergunta sobre vue-router, eu iria criar a tag vue-router se eu tinha a reputação de fazer isso
Yerko Palma

2
bom ponto! Fui em frente e criei a vue-routertag e a adicionei.
10136 Jeff

O problema é que a documentação do vue considera indesejáveis ​​os componentes de acoplamento ao roteador. Eles recomendam a passagem de adereços, mas não parece possível passar parâmetros de consulta dinamicamente como adereços. Por exemplo, em um beforeEach guarda fazendo algo como return next({ name: 'login', query:{param1: "foo" }, });não funciona. dentro do componente de login, o suporte param1é indefinido.
Hraynaud

45

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

2
Por que você location.hrefse dividiria quando há location.searchprontamente 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&par2seu código agora geraria uma exceção no par2, pois a divisão por '=' resultará em tmp com apenas 1 elemento.
Arthur

1
Desculpe não lançaria uma exceção, mas você também não capturaria o par2. Como você basicamente atribui undefineda getVars['par2'].
Arthur

o método GET é uma string (pares nome / valor), no URL
erajuan 31/01

@ Arthur, você está certo, adicionei uma validação e adicionei outras soluções. obrigado
erajuan

37

Resposta mais detalhada para ajudar os novatos do VueJS:

  • Primeiro, defina o objeto do seu roteador, selecione o modo que lhe parecer mais adequado. Você pode declarar suas rotas na lista de rotas.
  • Em seguida, você deseja que seu aplicativo principal saiba que o roteador existe, então declare-o na declaração principal do aplicativo.
  • Por fim, a instância $ route contém todas as informações sobre a rota atual. O código irá registrar o console apenas o parâmetro passado no URL. (* Montado é semelhante a document.ready, .ie é chamado assim que o aplicativo estiver pronto)

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)
    },
});

7
Por favor, explique-lo
Muhammad Muazzam

Primeiro defina o objeto do roteador, selecione o modo em que você se encaixa. Você pode declarar suas rotas na lista de rotas. Em seguida, você deseja que seu aplicativo principal saiba que o roteador existe, então declare-o na declaração principal do aplicativo. Por fim, a instância $ route contém todas as informações sobre a rota atual. Meu código irá registrar o console apenas o parâmetro passado no URL. (* Montada é semelhante ao document.ready, .ie seu chamado assim que o aplicativo está pronto)
Sabyasachi

3
Para novatos ainda mais sem noção: o VueRouter não está incluído no núcleo do VueJS, portanto, você pode querer incluir o VueRouter separadamente:<script src="https://unpkg.com/vue-router"></script>
rustyx

2
@Sabyasachi Edite sua resposta e adicione essas informações na própria publicação.
Simon Forsberg

1
new Vue({ router, ... })não é uma sintaxe válida.
Crescent Fresh

17

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.fooe você poderá fazer o que quiser com ele (como definir um inspetor etc.)


Isso é ótimo. A peça que falta no quebra-cabeça é a iniciação. Você pode fazer assim: `this. $ Router.push ({name: 'mypage', query: {foo: 'bar'})`
slf

7

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

3
Eles não são a mesma coisa! Você deve usar querypara 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)
hatef

Obrigado pelo esclarecimento :)
Marco

2

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 beforeRouteEnterfunção não podemos acessar as propriedades do componente como: this.propertyName.que por isso que tenho passar o vmpara nextfunction.It é a maneira recommented ao acesso vue instance.Actually o vmque significa, por exemplo, vue


2

Se o seu URL for algo parecido com isto:

somesite.com/something/123

Onde '123' é um parâmetro chamado 'id' (url como / something /: id), tente com:

this.$route.params.id

1

Você pode obter usando esta função.

console.log(this.$route.query.test)

-6

Se o seu servidor usa php, você pode fazer o seguinte:

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

Apenas funciona.


2
A questão era como fazer algo com o Vue, não com o PHP.
robertmain
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.