Как правильно настроить маршрутизацию во vue-router с несколькими необязательными параметрами, приличным url и автоматической генерацией ссылок?

Question

[Руслан]

Здравствуйте.
Задача сделать во vue-router маршрутизацию с соблюдением следующих условий:

1. некоторые части url должны передаваться в качестве props vue компонента. например, /test/page/3/pagesize/30 или /test?page=3&pagesize=30 или /test/page-3/pagesize-30

2. все параметры не являются обязательными, т.е. в url может какой-то параметр отсутствовать, и этот props во vue компоненте примет значение по умолчанию, а главное, маршрутизатор поймет, какой маршрут имеется в виду.

3. ссылки в компоненте router-link содержащие ссылку на самого себя и один параметр должны автоматически подтягивать остальные пропсы, которые сопоставлены с маршрутом.

Частично мне удалось решить эту задачу: https://codepen.io/Razbezhkin/pen/JjjPjQO?editors=1010
но в моем случае не удается сделать так, чтобы какие-то параметры в url указывать было не нужно.
и внешний вид url как то не очень радует глаз.

Подскажите, как вы решаете подобные задачи?
Спасибо

Answer 1

[Антон Антон]

Не надо плодить вопросы. А вообще как-то так:
https://jsfiddle.net/23s4czfa/1/
дополнил для п. 3
https://jsfiddle.net/nsr54z7c/

Comments

[Руслан]

Спасибо.
но получается не совсем то, что нужно.
например, если сначала нажать ссылку "foo: 1, bar: 2" (query: {foo: 1, bar: 2}), а потом "foo" (query: {foo: 3})
то получается, что параметр bar сбрасывается в значение по умолчанию.
а я то хочу, чтобы ссылка foo содержала два параметра: foo:3 и bar: <текущее значение бар>

[Антон Антон]

Руслан, https://jsfiddle.net/nsr54z7c/ все работает так как надо.

[Руслан]

ага. вижу что self link with foo: 4 работает так как нужно, но там явно указан параметр bar без значения, т.е. он будет браться из текущего копонента. а если у меня 100500 параметров и 100 ссылок, мне их тоже все перечислять придется в каждой ссылке?

[Антон Антон]

Руслан, сделайте функцию-генератор

[Руслан]

Антон Антон, Что-то вроде такого?

<router-link :to="{name: $route.name, query: Object.assign($route.query,{foo:4})}">self link with foo: 4</router-link>

?

[Антон Антон]

Руслан, да

[Антон Антон]

Руслан, только Object.assign меняет первый параметр, так что надо Object.assign({}, $route.query,{foo:4})} чтобы все сработало

[Руслан]

Фантастика!
это же вообще здорово, что не нужно все параметры руками перебирать.