VUE 3 Router не видит GET параметры?

В Vue 3 Router требуется некоторая настройка, чтобы передавать GET параметры на клиентскую сторону. По умолчанию, Vue 3 Router не распознает GET параметры, поскольку он работает на клиентской стороне, и GET параметры обычно используются на сервере.

Однако, есть несколько способов передачи GET параметров в Vue 3 Router:

1. Через пути маршрутизации:
Вы можете передать GET параметры в пути маршрута, используя динамические сегменты. Например, если у вас есть маршрут "/users/:id", вы можете передать значение параметра 'id' в GET запросе, таким образом: "/users/1?name=John".

2. Через Query параметры:
Vue 3 Router можно настроить так, чтобы он распознавал и сохранял Query параметры из URL. Для этого необходимо использовать специальный режим. Ниже приведен пример настройки Vue 3 Router для распознавания Query параметров:

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  parseQuery: (query) => {
    const parsed = {};
    query.split('&').forEach((param) => {
      const keyValue = param.split('=');
      if (keyValue.length === 2) {
        const key = decodeURIComponent(keyValue[0]);
        const value = decodeURIComponent(keyValue[1]);
        parsed[key] = value;
      }
    });
    return parsed;
  },
  stringifyQuery: (query) => {
    const params = new URLSearchParams();
    for (const key in query) {
      params.set(key, encodeURIComponent(query[key]));
    }
    return params.toString();
  },
});

3. Через хуки жизненного цикла маршрута:
В Vue 3 Router вы можете использовать хуки жизненного цикла маршрута, такие как beforeRouteEnter, beforeRouteUpdate и beforeRouteLeave, чтобы получить доступ к Query параметрам. Например, вы можете использовать this.$route.query для доступа к Query параметрам.

const router = createRouter({
  // ...
  routes: [
    {
      path: '/users',
      component: Users,
      beforeRouteEnter(to, from, next) {
        const { name } = to.query;
        // Делаем что-то с полученным параметром name
        next();
      },
    },
  ],
});

Надеюсь, что эти подробности помогут вам передавать GET параметры в вашем приложении, используя Vue 3 Router.