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

Solución:

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

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

Sin vue-route, divide 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 de su enrutador, seleccione el modo que le parezca adecuado. Puede declarar sus rutas dentro de la lista de rutas.
• A continuación, querrá que su aplicación principal sepa que existe el enrutador, por lo que debe declararlo dentro de la declaración de la aplicación principal.
• Por último, la instancia de $ route contiene toda la información sobre la ruta actual. El código registrará en la consola 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)
    },
});

---

---

Utiliza Nuestro Buscador