Comment puis-je obtenir des paramètres de requête à partir d'une URL dans Vue.js?

252

Comment puis-je récupérer les paramètres de requête dans Vue.js?

Par exemple http://somesite.com?test=yay.

Vous ne trouvez pas un moyen de récupérer ou dois-je utiliser du JS pur ou une bibliothèque pour cela?

Rob
la source
6
Pourquoi cette baisse est-elle votée? J'en ai besoin pour Vue.js. S'il y a une bibliothèque de vue ou quelque chose de construit, ce serait préférable à js brut.
Rob
54
Il n'y a même pas près d'un doublon. vue.js est un framework avec une logique spécifique, différent de vanila javascript
Yerko Palma
13
Comment cela peut-il être accompli sans vue-router?
Connor Leech

Réponses:

345

Selon les documents de l' objet route , vous avez accès à un $routeobjet à partir de vos composants, qui expose ce dont vous avez besoin. Dans ce cas

//from your component
console.log(this.$route.query.test) // outputs 'yay'
Yerko Palma
la source
8
Ouaip! S'il n'utilise vue-routerpas, ce serait en effet un doublon, car il devra utiliser des méthodes JS standard.
Jeff
1
Je suppose simplement que parce que le même utilisateur a posté juste avant une question sur vue-router, je créerais la balise vue-router si j'avais la réputation de le faire
Yerko Palma
2
bon point! Je suis allé de l'avant et j'ai créé le vue-routertag et l' ai ajouté.
Jeff
Le problème est que la documentation vue considère que le couplage de composants au routeur n'est pas souhaitable. Ils recommandent de passer des accessoires mais il ne semble pas possible de passer dynamiquement des paramètres de requête comme accessoires. Par exemple, dans un garde avant, faire quelque chose comme return next({ name: 'login', query:{param1: "foo" }, });ça ne fonctionne pas. à l'intérieur du composant de connexion, l'hélice param1n'est pas définie.
hraynaud
45

Sans vue-route, divisez l'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(){
  },

Une autre solution 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(){
  },
erajuan
la source
2
Pourquoi voudriez-vous vous séparer location.hrefquand il est location.searchfacilement disponible? developer.mozilla.org/en-US/docs/Web/API/… eg var querypairs = window.location.search.substr(1).split('&');Par exemple, le fractionnement des paires nom-valeur de la requête par '=' ne fonctionnera pas toujours car vous pouvez également transmettre des paramètres de requête nommés sans valeur; Par exemple, ?par1=15&par2votre code lèverait maintenant une exception sur le par2 car la division par '=' entraînera tmp avec seulement 1 élément.
Arthur
1
Désolé ne lève pas d'exception mais vous n'attraperez pas le par2 non plus. Comme vous attribuez essentiellement undefinedà getVars['par2'].
Arthur
la méthode GET est une chaîne (paires nom / valeur), dans l'URL
erajuan
@Arthur tu as raison, j'ai ajouté une validation et j'ai ajouté une autre solution. merci
erajuan
37

Réponse plus détaillée pour aider les débutants de VueJS:

  • Définissez d'abord votre objet routeur, sélectionnez le mode qui vous semble convenir. Vous pouvez déclarer vos itinéraires dans la liste des itinéraires.
  • Ensuite, vous souhaitez que votre application principale sache que le routeur existe, alors déclarez-le dans la déclaration de l'application principale.
  • Enfin, ils $ instance instance contient toutes les informations sur l'itinéraire actuel. Le code consignera le journal uniquement le paramètre passé dans l'url. (* Monté est similaire à document.ready, .ie est appelé dès que l'application est prête)

Et le code lui-même:

<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)
    },
});
Sabyasachi
la source
7
Veuillez l'expliquer
Muhammad Muazzam
Définissez d'abord votre objet routeur, sélectionnez le mode qui vous semble approprié. Vous pouvez déclarer vos itinéraires dans la liste des itinéraires. Ensuite, vous souhaitez que votre application principale sache que le routeur existe, alors déclarez-le dans la déclaration de l'application principale. Enfin, ils $ instance instance contient toutes les informations sur l'itinéraire actuel. Mon code consignera le journal uniquement le paramètre passé dans l'url. (* Monté est similaire à document.ready, .ie est appelé dès que l'application est prête)
Sabyasachi
3
Pour les débutants encore plus désemparés: VueRouter n'est pas inclus dans le noyau VueJS, vous pouvez donc vouloir inclure le VueRouter séparément:<script src="https://unpkg.com/vue-router"></script>
rustyx
2
@Sabyasachi Modifiez votre réponse et ajoutez ces informations dans le message lui-même.
Simon Forsberg
1
new Vue({ router, ... })n'est pas une syntaxe valide.
Crescent Fresh du
17

Une autre façon (en supposant que vous utilisez vue-router) est de mapper le paramètre de requête à un accessoire de votre routeur. Ensuite, vous pouvez le traiter comme n'importe quel autre accessoire dans votre code de composant. Par exemple, ajoutez cette route;

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

Ensuite, dans votre composant, vous pouvez ajouter l'accessoire normalement;

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

Ensuite, il sera disponible en tant que this.fooet vous pouvez faire tout ce que vous voulez avec lui (comme définir un observateur, etc.)

Mike P
la source
C'est bien. La pièce manquante au puzzle est l'initiation. Vous pouvez le faire comme ceci: `this. $ Router.push ({name: 'mypage', query: {foo: 'bar'})`
slf
7

À partir de cette date, la manière correcte selon les documents de routage dynamique est:

this.$route.params.yourProperty

au lieu de

this.$route.query.yourProperty
Marco
la source
3
Ce n'est pas la même chose! Vous devez utiliser querypour obtenir les requêtes à partir de l'URL. De la documentation: En plus de $ route.params, l'objet $ route expose également d'autres informations utiles telles que $ route.query (s'il y a une requête dans l'URL)
hatef
Merci pour la clarification :)
Marco
2

Vous pouvez utiliser vue-router. J'ai un exemple ci-dessous:

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

Remarque: En beforeRouteEnterfonction , nous ne pouvons pas accéder aux propriétés du composant comme: this.propertyName.que est pourquoi j'ai passer le vmà nextfunction.It est le moyen recommented pour accéder à la vue instance.Actually l' vmon signifie par exemple vue

roli roli
la source
2

Si votre URL ressemble à ceci:

somesite.com/something/123

Où '123' est un paramètre nommé 'id' (url comme / quelque chose /: id), essayez avec:

this.$route.params.id
trishke
la source
1

Vous pouvez obtenir en utilisant cette fonction.

console.log(this.$route.query.test)
revati raman
la source
-7

Si votre serveur utilise php, vous pouvez le faire:

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

Fonctionne juste.

Cao Shouguang
la source
4
La question était de savoir comment faire quelque chose avec Vue, pas avec PHP.
robertmain