Vue.js les paramètres de la requête

Comment puis-je récupérer les paramètres de la requête en vue.js?

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

Ne peut pas trouver un moyen de récupérer ou dois-je l'utiliser pur JS ou une bibliothèque pour cela?

Double Possible de Comment puis-je obtenir des valeurs de chaîne de requête en JavaScript?
Pourquoi est-ce faire de down ont voté? J'en ai besoin pour Vue.js. Si il ya une vue de la bibliothèque ou quelque chose de construit dans, il serait préférable brut js.
Il y a probablement quelque chose en Vue Routeur qui est-il, si vous l'utilisez.
Il n'est même pas proche d'un duplicata. vue.js c'est un cadre avec une logique spécifique, différent de vanila javascript
Comment cela peut-il être accompli sans vue-routeur?

InformationsquelleAutor Rob | 2016-03-10

206

Selon les docs de route de l'objet, vous avez accès à un $route objet de vos composants, que d'exposer ce dont vous avez besoin. Dans ce cas
```
//from your component
console.log(this.$route.query.test) //outputs 'yay'
```
- Yup! Si il n'est pas à l'aide de vue-router que ce serait un doublon, car il aura besoin d'utiliser la norme JS méthodes.
- Je viens de supposer que parce que le même utilisateur posté juste avant une question à propos de la vue-routeur, je voudrais créer la vue-routeur tag si j'avais la réputation de le faire
- bon point! Je suis allé de l'avant et a créé le vue-router de la balise et de l'ajouter.
- Le problème est que la vue de la documentation considère le couplage de composants pour le routeur d'être indésirable. Ils vous recommandons de passer accessoire, mais il ne semble pas possible de passer la requête params dynamiquement que les accessoires. Par exemple, dans un beforeEach garde de faire quelque chose comme return next({ name: 'login', query:{param1: "foo" }, }); ne fonctionne pas. à l'intérieur de la connexion d'un composant prop param1 est pas défini.
InformationsquelleAutor Yerko Palma
32

Réponse plus détaillée pour aider les débutants 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)
    },
});
```
- Veuillez expliquer
- D'abord définir votre routeur objet, sélectionnez le mode que vous semble adaptée.Vous pouvez déclarer vos itinéraires à l'intérieur de la liste de routes. Ensuite, vous voudriez que votre application principale pour savoir routeur existe, et donc de le déclarer à l'intérieur de la principale application de la déclaration . Enfin ils $route instance possession de toutes les informations au sujet de l'itinéraire actuel. Mon code journal de la console juste le paramètre passé dans l'url. (*Le montage est similaire au document.prêt , .c'est à dire son appelé dès que l'application est prête)
- Pour encore plus désemparés débutants: VueRouter n'est pas inclus dans VueJS de base, de sorte que vous pouvez inclure VueRouter séparément: <script src="https://unpkg.com/vue-router"></script>
- Modifier votre réponse et d'ajouter cette information dans le post lui-même.
- new Vue({ router, ... }) n'est pas valide la syntaxe.
- Le script est en partie ES6 d'utilisation qui, je pense, est de rendre les choses pires pour les nouveaux arrivants. Soit aller à plein ES6 avec la bonne variable decleration et la flèche de fonctions ou de les utiliser de façon traditionnelle.
- nouvelle Vue({ routeur, ... }) est le raccourci dans l'ES6. En javascript normale est nouvelle Vue({ 'routeur: routeur, ... })
- Au lieu de: nouvelle Vue({ routeur, ... essayez équivalent: nouvelle Vue({ routeur: routeur, ...
InformationsquelleAutor Sabyasachi
29

Sans vue de l'itinéraire, split, 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(){
  },
```
- Pourquoi voudriez-vous split location.href vous-même quand il est location.search facilement disponibles? developer.mozilla.org/en-US/docs/Web/API/... par exemple, var querypairs = window.location.search.substr(1).split('&'); Également le fractionnement de la requête de paires nom-valeur par '=' ne fonctionne pas toujours comme vous pouvez le passer nommé les paramètres de la requête sans valeur; par exemple, ?par1=15&par2 Votre code maintenant soulever une exception sur par2 en divisant par '=' entraînera tmp avec seulement 1 élément.
- Désolé de ne lancerait pas une exception, mais vous ne serait pas attraper par2 soit. Comme vous fondamentalement affecter undefined à getVars['par2'].
- la méthode GET est une chaîne de caractères (des paires nom/valeur), dans l'URL
- vous avez raison, j'ai ajouté une validation et j'ai ajouté un autre des solutions. merci
InformationsquelleAutor erajuan
10

D'une autre façon (en supposant que vous utilisez vue-router), est de cartographier la requête de paramètre à un accessoire de votre routeur. Ensuite, vous pouvez le traiter comme tout autre accessoire de votre code du composant. Par exemple, ajouter cette route;
```
{ 
    path: '/mypage', 
    name: 'mypage', 
    component: MyPage, 
    props: (route) => ({ foo: route.query.foo })  
}
```
Puis dans votre partie, vous pouvez ajouter l'accessoire comme normal;
```
props: {
    foo: {
        type: String,
        default: null
    }
},
```
Ensuite, il sera disponible en this.foo et vous pouvez faire ce que vous voulez avec (comme un observateur, etc.)

InformationsquelleAutor Mike P
2

Vous pouvez utiliser la vue-routeur.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: Dans beforeRouteEnter fonction nous ne peut pas accéder aux propriétés du composant comme: this.propertyName.C'est pourquoi j'ai passer le vm à next fonction.C'est le recommented moyen pour accéder à la vue de l'instance.En fait le vm il est synonyme de vue de l'instance

InformationsquelleAutor roli roli

Vous devez vous connecter pour publier un commentaire.