VueJs получает запрос URL

Я разрабатываю веб-сайт с vuejs, и в данный момент у меня проблемы, мне нужно получить URL-запрос (страницу) с URL-адреса, подобного этому websitename.com/user/?page=1, но this.$router.query.page дает мне ошибку (Uncaught TypeError: невозможно прочитать страницу свойства undefined)

Кто-нибудь знает что-нибудь об этой проблеме и может мне помочь?

PS: я могу настроить страницу запроса, используя

this.$router.push({name: 'userIndex', query: { page: '123' } });

и я могу получить нормальные параметры URL, такие как

userID -> (websitename.com/user/:userId | websitename.com/user/1)

но я не могу получить ни одного параметра запроса.


vue.js vue-router vuejs2 vue-component
person Simão Lemos    schedule 18.02.2017    source источник

Ответы (4)


arrow_upward
140
arrow_downward

Я думаю, вы можете просто вызвать такой вызов, это даст вам значение результата.

this.$route.query.page

Посмотрите изображение $ route - это объект в экземпляре Vue, и вы можете получить доступ с помощью этого ключевого слова, а затем вы можете выбрать свойства объекта, как указано выше:

введите описание изображения здесь

Посмотрите документ Vue-router для выбора значения запросов:

объект маршрутизатора Vue

person Mandeep Gill    schedule 18.02.2017
comment
ваш ответ правильный, но console.log работает также после того, как я изменю обработчик событий, в котором есть вызов к запросу маршрутизатора для создания - person Simão Lemos; 19.02.2017

arrow_upward
16
arrow_downward

Вы также можете получить их с помощью чистого javascript.

Например:

new URL(location.href).searchParams.get('page')

Для этого URL: websitename.com/user/?page=1 будет возвращено значение 1.

person Brad Ahrens    schedule 18.11.2019

arrow_upward
12
arrow_downward

Текущие свойства маршрута представлены в this.$route, this.$router - это экземпляр объекта маршрутизатора, который дает конфигурацию маршрутизатора. Вы можете получить текущий запрос маршрута, используя this.$route.query

person Srinivas Damam    schedule 18.02.2017

arrow_upward
10
arrow_downward

В моем случае я console.log(this.$route) и вернул полный путь:

console.js:
fullPath: "/solicitud/MX/666",
params: {market: "MX", id: "666"},
path: "/solicitud/MX/666"

console.js: /solicitud/MX/666
person Jorge Epuñan    schedule 16.07.2018