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

vue-router props

Question

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

Por ejemplo, http://somesite.com?test=yay .

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

Answer 1

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 función beforeRouteEnter no podemos acceder a las propiedades del componente como: this.propertyName Es por eso que he pasado el vm a la next función. Es la forma recomendada de acceder a la instancia de vue. En realidad, el vm significa instancia de vue

Answer 2

A partir de esta fecha, la forma correcta es (no sé por qué han cambiado):

this.$route.params.yourProperty instead of this.$route.query.yourProperty

Docs

Answer 3

De acuerdo con los documentos del objeto route , tiene acceso a un objeto $route desde sus componentes, que expone lo que necesita. En este caso

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

Answer 4

Otra forma (suponiendo que esté utilizando 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
    }
},

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

Answer 5

Respuesta más detallada para ayudar a los novatos de VueJs.

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

Answer 6

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