¿Cómo puedo obtener parámetros de consulta de una URL en Vue.js?


251

¿Cómo puedo obtener los parámetros de consulta en Vue.js?

Por ej http://somesite.com?test=yay.

¿No puedo encontrar una manera de buscar o necesito usar JS puro o alguna biblioteca para esto?


55
¿Por qué se está votando esto? Lo necesito para Vue.js. Si hay alguna biblioteca vue o algo integrado, sería preferible a js sin formato.
Rob

Probablemente haya algo en Vue Router que lo haga, si lo está usando.
Joe Clay

54
Ni siquiera hay cerca de un duplicado. vue.js es un marco con una lógica específica, diferente de vanila javascript
Yerko Palma

13
¿Cómo se puede lograr esto sin vue-router?
Connor Leech

Respuestas:


345

De acuerdo con los documentos del objeto de ruta , tiene acceso a un $routeobjeto desde sus componentes, que exponen lo que necesita. En este caso

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

8
¡Sip! Si no está usando, vue-routeresto sería un duplicado, ya que necesitará usar métodos JS estándar.
Jeff

1
Supongo que debido a que el mismo usuario publicó justo antes de una pregunta sobre vue-router, crearía la etiqueta vue-router si tuviera la reputación de hacerlo
Yerko Palma

2
¡buen punto! Seguí adelante y creé la vue-routeretiqueta y la agregué.
Jeff

El problema es que la documentación de vue considera que los componentes de acoplamiento al enrutador no son deseables. Recomiendan pasar accesorios, pero no parece posible pasar parámetros de consulta dinámicamente como accesorios. Por ejemplo, en un beforeCada guardia que hace algo así return next({ name: 'login', query:{param1: "foo" }, });no funciona. dentro del componente de inicio de sesión, el accesorio param1no está definido.
hraynaud

45

Sin vue-route, divida la 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(){
  },

Otra solución 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 qué te dividirías location.hrefcuando hay location.searchfácilmente disponible? developer.mozilla.org/en-US/docs/Web/API/… p.ej. var querypairs = window.location.search.substr(1).split('&');También dividir los pares de nombre-valor de consulta por '=' no siempre funcionará, ya que también puede pasar parámetros de consulta con nombre sin valor; Por ejemplo, ?par1=15&par2su código ahora generaría una excepción en par2 ya que la división por '=' dará como resultado tmp con solo 1 elemento.
Arthur

1
Lo siento, no lanzaría una excepción, pero tampoco atraparías el par2. Como básicamente lo asignas undefineda getVars['par2'].
Arthur

el método GET es una cadena (pares de nombre / valor), en la URL
erajuan

@ Arthur tiene razón, agregué una validación y agregué otras soluciones. gracias
erajuan 01 de

37

Respuesta más detallada para ayudar a los novatos de VueJS:

  • Primero defina el objeto del enrutador, seleccione el modo que parezca adecuado. Puede declarar sus rutas dentro de la lista de rutas.
  • A continuación, desearía que su aplicación principal sepa que el enrutador existe, así que declare dentro de la declaración de la aplicación principal.
  • Por último, la instancia $ route contiene toda la información sobre la ruta actual. El código de la consola registrará solo el parámetro pasado en la url. (* Montado es similar a document.ready, .ie se llama tan pronto como la aplicación está lista)

Y el código en sí:

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

77
Por favor explique
Muhammad Muazzam

Primero defina el objeto de su enrutador, seleccione el modo que le parezca adecuado. Puede declarar sus rutas dentro de la lista de rutas. A continuación, desearía que su aplicación principal sepa que el enrutador existe, así que declare dentro de la declaración de la aplicación principal. Por último, la instancia $ route contiene toda la información sobre la ruta actual. Mi código consola registrará solo el parámetro pasado en la url. (* Montado es similar a document.ready, .ie se llama tan pronto como la aplicación está lista)
Sabyasachi

3
Para principiantes aún más despistados: VueRouter no está incluido en el núcleo de VueJS, por lo que es posible que desee incluir el VueRouter por separado:<script src="https://unpkg.com/vue-router"></script>
rustyx

2
@Sabyasachi Edite su respuesta y agregue esa información dentro de la publicación misma.
Simon Forsberg

1
new Vue({ router, ... })No es una sintaxis válida.
Crescent Fresh

17

Otra forma (suponiendo que esté usando vue-router), es asignar el parámetro de consulta a un accesorio en su enrutador. Entonces puedes tratarlo como cualquier otro accesorio en tu código de componente. Por ejemplo, agregue esta ruta;

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

Luego, en su componente, puede agregar el accesorio normalmente;

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

Luego estará disponible como this.fooy puede hacer lo que quiera con él (como configurar un observador, etc.)


Esto es genial. La pieza que falta en el rompecabezas es la iniciación. Puede hacerlo así: `this. $ Router.push ({name: 'mypage', query: {foo: 'bar'})`
slf

7

A partir de esta fecha, la forma correcta de acuerdo con los documentos de enrutamiento dinámico es:

this.$route.params.yourProperty

en vez de

this.$route.query.yourProperty

3
¡No són la misma cosa! Debe usar querypara obtener las consultas de la URL. De los documentos: además de $ route.params, el objeto $ route también expone otra información útil como $ route.query (si hay una consulta en la URL)
hatef

Gracias por la aclaración :)
Marco

2

Puede usar vue-router. Tengo un ejemplo a continuación:

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: en la beforeRouteEnterfunción no podemos acceder a las propiedades del componente como:. this.propertyNameEs por eso que he pasado vma la nextfunción. Es la forma recomendada de acceder a la instancia de vue. En vmrealidad, es la instancia de vue.


2

Si tu url se parece a esto:

somesite.com/something/123

Donde '123' es un parámetro llamado 'id' (url like / something /: id), intente con:

this.$route.params.id

1

Puede obtener mediante el uso de esta función.

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

-6

Si su servidor usa php, puede hacer esto:

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

Solo funciona


2
La pregunta era cómo hacer algo con Vue, no con PHP.
Robertmain
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.