В ходе разных экспериментов я пришел к такому выводу:
Если мы хотим сделать страницу (компонент|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, и следовательно не позволит получить правильную ссылку.
Насколько это нормальное решение? есть ли у кого-то более изящное? как делаете вы?
Спасибо.
