Как правильно сделать обновляемый компонент vue связанный с vue-router с параметрами url?
Речь идет о том, как сделать компонент vue, у которого много параметров в url влияют на его внешний вид (например, номер и размер страницы, два десятка фильтров, параметры сортировки), так, чтобы все эти параметры обновлялись в 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, и следовательно не позволит получить правильную ссылку.
Насколько это нормальное решение? есть ли у кого-то более изящное? как делаете вы?
Спасибо.
В :to у router-link и в push можно передавать объект вида {name: 'имя маршрута', params: {ключ1: значение1, ключ2: значение2...}} что сильно облегчит задачу 1. При этом если указать в свойствах маршрута props: true, то все параметры маршрута будут переданы в props компонента, что решит задачу 2 и избавит от 3. Вместо изменения props делать $router.push, да. Ну, или .replace, если нужно.
Отлично.
А вот еще вопрос, как лучше всего передать ссылку на возвращение, поясню:
я нахожусь в компоненте со списком, у которого много параметров в url, затем я перехожу на другой маршрут, к другому компоненту, чего-то там делаю и мне нужно вернуться к прежнему месту. Я предполагаю, что нужно в этот компонент передать какой-нибудь пропс, что-то вроде returnurl, который будет иметь значение текущей локации, а для возврата просто вызвать $router.push(returnurl)
Антон, спасибо за подсказки.
Я сегодня поэкспериментировал с маршрутами и параметрами и выяснил вот что:
Если мы в конфигурации маршрутизатора указываем пути с динамическими частями, (например так: path: "/advnotes/page/:page/scope/:scope") и указываем props:true, то все получается так, как вы и сказали, ссылки с частичным указанием пропсов (вот таких след.) действительно дополняются всеми остальными пропсами, которые были указаны в маршруте.
но с query параметрами такое не проходит, т.е. если в маршруте написать
name: "testroute",
props: (r) => ({
page: r.query["page"],
scope: r.query["scope"],
}),
а ссылки оформить как
след2
то полученная ссылка будет содержать только один query параметр, в этом случае page=2
Выходит, что если мы хотим менять url, менять только один параметр и чтобы остальные оставались прежними - то нужно использовать динамические сегменты в маршруте.
а если хотим использовать параметры query, то о сохранении остальных параметров мы должны позаботиться сами, явно прописывая их во всех ссылках.
Или может быть вы знаете какой-то способ, чтобы работать с query так же гибко как с динамическими сегментами
Простой