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 de moyen de récupération ou dois-je utiliser JS pur ou une bibliothèque pour cela?
Selon la documentation de objet route , vous avez accès à un objet $route
à 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, diviser 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.
<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 utilisiez 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 de votre code 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 comme d'habitude.
props: {
foo: {
type: String,
default: null
}
},
Ensuite, il sera disponible en tant que this.foo
et vous pourrez faire tout ce que vous voulez (comme définir un observateur, etc.)
Vous pouvez utiliser vue-router.J'en ai un exemple ci-dessous:
rl: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 la fonction beforeRouteEnter
, nous ne pouvons pas accéder aux propriétés du composant telles que: this.propertyName
. C'est pourquoi j'ai passé la fonction vm
à next
.It est le moyen recommandé pour accéder à l'instance vue. En fait, le vm
il représente l'instance vue
A cette date, la bonne façon est (je ne sais pas pourquoi ils ont changé):
this.$route.params.yourProperty instead of this.$route.query.yourProperty