Получение параметров запроса из 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&param2=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.

Полезные материалы

1. Сопоставление маршрутов с параметрами | Vue Router
2. Различные режимы истории | Vue Router
3. URLSearchParams – Веб-API | MDN
4. url – Как получить значения строки запроса в JavaScript? – Stack Overflow
5. JavaScript Window Location
6. Программная навигация | Vue Router
7. Охранники навигации | Vue Router