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

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?

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'

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

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

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

À 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

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

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

Vous pouvez obtenir en utilisant cette fonction.

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

Si votre serveur utilise php, vous pouvez le faire:

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

Fonctionne juste.