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?
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?
Réponses:
Selon les documents de l' objet route , vous avez accès à un
$route
objet à partir de vos composants, qui expose ce dont vous avez besoin. Dans ce casla source
vue-router
pas, ce serait en effet un doublon, car il devra utiliser des méthodes JS standard.vue-router
tag et l' ai ajouté.return next({ name: 'login', query:{param1: "foo" }, });
ça ne fonctionne pas. à l'intérieur du composant de connexion, l'héliceparam1
n'est pas définie.Sans vue-route, divisez l'URL
Une autre solution https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/search :
la source
location.href
quand il estlocation.search
facilement disponible? developer.mozilla.org/en-US/docs/Web/API/… egvar 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&par2
votre code lèverait maintenant une exception sur le par2 car la division par '=' entraînera tmp avec seulement 1 élément.undefined
àgetVars['par2']
.Réponse plus détaillée pour aider les débutants de VueJS:
Et le code lui-même:
la source
<script src="https://unpkg.com/vue-router"></script>
new Vue({ router, ... })
n'est pas une syntaxe valide.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;Ensuite, dans votre composant, vous pouvez ajouter l'accessoire normalement;
Ensuite, il sera disponible en tant que
this.foo
et vous pouvez faire tout ce que vous voulez avec lui (comme définir un observateur, etc.)la source
À partir de cette date, la manière correcte selon les documents de routage dynamique est:
au lieu de
la source
query
pour 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)url:
www.example.com?name=john&lastName=doe
Remarque: En
beforeRouteEnter
fonction , nous ne pouvons pas accéder aux propriétés du composant comme:this.propertyName
.que est pourquoi j'ai passer levm
ànext
function.It est le moyen recommented pour accéder à la vue instance.Actually l'vm
on signifie par exemple vuela source
Si votre URL ressemble à ceci:
Où '123' est un paramètre nommé 'id' (url comme / quelque chose /: id), essayez avec:
la source
Vous pouvez obtenir en utilisant cette fonction.
la source
Si votre serveur utilise php, vous pouvez le faire:
Fonctionne juste.
la source