Как я могу получить параметры запроса в Vue.js?
Например. http://somesite.com?test=yay
.
Не могу найти способ получить или мне нужно использовать чистый JS или какую-то библиотеку для этого?
Как я могу получить параметры запроса в Vue.js?
Например. http://somesite.com?test=yay
.
Не могу найти способ получить или мне нужно использовать чистый JS или какую-то библиотеку для этого?
Согласно документам объекта маршрута, у вас есть доступ к объекту $route
из ваших компонентов, который раскрывает то, что вам нужно. В этом случае
//from your component
console.log(this.$route.query.test) // outputs 'yay'
Более подробный ответ, чтобы помочь новичкам 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)
},
});
Без vue-route разделите 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(){
},
Другое решение 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(){
},
Другой способ (при условии, что вы используете vue-router
) - это сопоставить параметр запроса с подпоркой в вашем маршрутизаторе. Затем вы можете обращаться с ним как с любой другой опорой в коде вашего компонента. Например, добавьте этот маршрут;
{
path: '/mypage',
name: 'mypage',
component: MyPage,
props: (route) => ({ foo: route.query.foo })
}
Затем в свой компонент вы можете добавить опору как обычно;
props: {
foo: {
type: String,
default: null
}
},
Тогда он будет доступен как this.foo
, и вы можете делать с ним все, что захотите (например, установить наблюдателя и т.д.)
Вы можете использовать vue-router.I есть пример ниже:
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()
}
})
Примечание. В функции beforeRouteEnter
мы не можем получить доступ к свойствам компонента, например: this.propertyName
Вот почему я передал vm
next
функции. Это рекомментированный способ доступа к экземпляру vue. vm
он обозначает экземпляр vue
На сегодняшний день правильный путь (я не знаю, почему они изменились):
this.$route.params.yourProperty instead of this.$route.query.yourProperty