Получение параметров запроса из URL во Vue.js
Быстрый ответ
Для извлечения параметров запроса в Vue.js используйте this.$route.query
. Например, если URL выглядит так: http://example.com/?user=alice
, параметр можно извлечь вот так:
const user = this.$route.query.user; // "alice"
Vue Router предоставляет объект $route
, который обеспечивает удобный доступ к параметрам query
.
Из первых рук – без посредников
Для непосредственного взаимодействия с параметрами Вы можете использовать API URLSearchParams
:
const urlParams = new URLSearchParams(window.location.search);
const paramName = urlParams.get('paramName'); // Значение 'paramName'
Это подходит не только для Vue.js. URLSearchParams
позволяет работать с параметрами без использования внешних библиотек.
Жизненный цикл компонента Vue.js
В различные эпизоды жизненного цикла компонента Vue.js можно извлекать параметры запроса. Например, при создании компонента:
created() {
console.log(this.$route.query);
}
А также после полной загрузки и стабилизации DOM:
mounted() {
const specificParam = this.$route.query.paramName;
console.log(specificParam);
}
Динамическая маршрутизация
Для динамического маршрутного сопоставления нужно связать параметры запроса с props:
const router = new VueRouter({
routes: [
{
path: '/search',
component: SearchComponent,
props: (route) => ({ query: route.query.q })
}
]
});
// В компоненте SearchComponent:
props: ['query'],
Наблюдение и обучение
С помощью VueRouter можно отслеживать изменения параметров:
watch: {
'$route.query.paramName'(newValue, oldValue) {
// Реакция на изменение параметра
}
}
Правила маршрутизации
Для устранения символа решетки (#) в URL-адресе используйте режим 'history':
const router = new VueRouter({
mode: 'history',
// Остальной маршрут...
});
Не забывайте об использовании навигационных охранников для контроля переходов.
Параметры по умолчанию
Устанавливайте значения по умолчанию и проводите их проверку на соответствие типу для props:
props: {
paramName: {
type: String,
default: 'default'
}
}
Визуализация
Пример URL: 'https://example.com/page?param1=value1¶m2=value2'
Использование функции .get()
дает доступ к значениям параметров:
const params = new URLSearchParams(window.location.search);
const mystery1 = params.get('param1'); // 'value1'
const mystery2 = params.get('param2'); // 'value2'
Стильная навигация
Для программного навигационного перемещения используйте this.$router.push
:
this.$router.push({ path: '/search', query: { q: 'Vue.js' } });
Особенности и тонкости
Будьте готовы к изменениям URL, учитывайте совместимость с браузерами и не упустите декодирование URI.