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

¿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?

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'

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

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

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.)

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

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.

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

Puede obtener mediante el uso de esta función.

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

Si su servidor usa php, puede hacer esto:

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

Solo funciona