Как я могу получить параметры запроса в 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'
vue-router
это действительно будет дубликатом, так как ему нужно будет использовать стандартные методы JS.
vue-router
тег и добавил его.
return next({ name: 'login', query:{param1: "foo" }, });
не работает. в компоненте входа в систему опора param1
не определена.
Без 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(){
},
location.href
себя, когда есть в location.search
наличии? developer.mozilla.org/en-US/docs/Web/API/… Например, var querypairs = window.location.search.substr(1).split('&');
разделение пар «имя-значение» запроса на «=» не всегда будет работать, поскольку вы также можете передавать именованные параметры запроса без значения; например, ?par1=15&par2
ваш код теперь вызовет исключение для par2, так как разбиение по '=' приведет к tmp только с 1 элементом.
undefined
в getVars['par2']
.
Более подробный ответ в помощь новичкам 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)
},
});
<script src="https://unpkg.com/vue-router"></script>
new Vue({ router, ... })
неверный синтаксис
Другой способ (при условии, что вы используете vue-router
), это сопоставить параметр запроса с подпоркой в вашем маршрутизаторе. Затем вы можете обращаться с ним как с любой другой опорой в коде вашего компонента. Например, добавьте этот маршрут;
{
path: '/mypage',
name: 'mypage',
component: MyPage,
props: (route) => ({ foo: route.query.foo })
}
Затем в свой компонент вы можете добавить опору как обычно;
props: {
foo: {
type: String,
default: null
}
},
Тогда он будет доступен как this.foo
и вы можете делать с ним все что угодно (например, установить наблюдателя и т. Д.)
На сегодняшний день правильный путь в соответствии с документацией по динамической маршрутизации :
this.$route.params.yourProperty
вместо того
this.$route.query.yourProperty
query
чтобы получить запросы от URL. Из документов: В дополнение к $ route.params объект $ route также предоставляет другую полезную информацию, такую как $ route.query (если в URL есть запрос)
Вы можете использовать vue-router. У меня есть пример ниже:
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
function.It является recommented способом доступа к вю instance.Actually vm
это означает вю , например
Вы можете получить с помощью этой функции.
console.log(this.$route.query.test)
Если ваш сервер использует php, вы можете сделать это:
const from = '<?php echo $_GET["from"];?>';
Просто работает.