Как правильно связать пагинацию с vue-router?

Question

[Руслан]

Здравствуйте!
В компоненте есть пагинатор, который генерирует событие change, которое улавливается функцией, которая изменяет номер текущей страницы, подгружает данные с сервера и обновляет некоторую таблицу с данными.
необходимо сделать отражение номера страницы в url: /data?page=1
Как это правильно сделать, у меня два варианта:

1. Сделать так, чтобы пагинатор сразу совершал переход при помощи ссылки

<router-link :to='`/data?page=${currentPage+1}`'>след.</router-link>

в компоненте улавливать изменение this.$route и запускать подгрузку и обновление данных

2. в функции обработки смены страницы каким-то образом менять url браузера (если так вообще можно, то как?).

Как лучше?

И второй вопрос по этой же теме: предположим, у меня есть некоторое множество фильтрующих параметров в компоненте (штук 10-20), есть ли какой-то существующий метод/функция, которые могут (легко и просто) на основе этих параметров строить маршрут (url для перехода) и наоборот.
мне пока кроме такого ничего в голову не приходит:

let url = `/data?page=${val}&pagesize=${ps}&categoryid=${catid}`;

и

if (this.$route.query["page"]) filters.page = Number(this.$route.query["page"]);

Спасибо!

Answer 1

[Руслан]

В ходе разных экспериментов я пришел к такому выводу:
Если мы хотим сделать страницу (компонент|view) чтобы соблюдались такие условия:
- у компонента есть параметры, влияющие на его отображение (например, номер страницы списка и/или фильтры)
- мы хотим чтобы в url отражались эти параметры и можно было сохранить ссылку на компонент в таком виде
- чтобы при открытии страницы по ссылке внешний вид компонента восстанавливался.
- если мы ходим вперед/назад в браузере, то восстанавливается состояние, соответствующее истории браузера.

То нам следует писать компонент следующим образом:
1. Все параметры, которые мы хотим иметь в url необходимо изменять через маршрутизацию при помощи элемента "router-link", или атрибутов "to" некоторых элементов, или при помощи this.$routes.push. При этом ссылка должна быть такой, чтобы все параметры, кроме изменяемого были такими же.

Например, у нас есть номер страницы, размер страницы и категория, которые должны быть в url, чтобы пользователь мог пересылать ссылку на определенную страницу определенной категории. Таким образом, ссылки пагинатора должны иметь вид:
/goods?page=1&ps=20&catid=10, /goods?page=2&ps=20&catid=10, /goods?page=3&ps=20&catid=10
соответственно, если у нас будет 50 параметров, которые мы должны отражать, то нам нужно будет организовать адреса переходов для 50 параметров, причем для всех компонентов, которые меняют эти параметры, для этого, наверное, нужно написать какой-нибудь велосипед, который берет текущие параметры урлов, меняет (или добавляет) в них какой-то один и генерирует новый адрес перехода.

2. нужно написать в компоненте метод инициализации, который при помощи параметров в url восстанавливает состояние компонента.

3. в хуке жизненного цикла mounted и в watch'ере маршрутизатора ($route) вызывать метод инициализации из п.2.

4. (это п.1 наоборот) нельзя напрямик (без перехода через маршрутизатор) менять состояние при изменении любого параметра влияющего на состояние, т.е. пагинатор не должен просто менять переменную, отвечающую за номер страницы и обновлять массив загруженных товаров - это не изменит url, и следовательно не позволит получить правильную ссылку.

Насколько это нормальное решение? есть ли у кого-то более изящное? как делаете вы?
Спасибо.

Comments

[Nikita Niki]

Доброго времени суток, Руслан спасибо вам за вопрос и соответственно ответ)) Я изучаю вью и хотел бы спросить с тех времен вы нашли более изящное решение или же мб подскажите какой нибудь репозиторий где подглянуть, мне нужно реализовать фильтр с помощью отправки запросов с параметрами в общем как вы и описали с соблюдением тем самых правил.

[Аркадий Кожедуб]

Nikita Niki, тоже интересно увидеть хорошее и переиспользуемое решение.

Answer 2

[Saintcoder]

Набросал небольшой код, может кому поможет - дабы не мучиться и понять как оно работает.
https://codesandbox.io/s/young-hill-jmosck