Роутинг внутри одной страницы?

Question

[Артур Галяев]

Например, есть у меня страница с фильтрами, /filters
Хочу чтобы для каждого фильтра был свой параметр /filters?color=red&price=1000
Или даже так /filters/advancedMode?color=red
Как правильнее такое сделать в Vue js?

Comments

[Михаил]

вот это уже страница advancedMode, а остальное просто url параметры

Answer 1

[Elhait]

Если использовать vue router то можно сделать так для html

<router-link :to="{ query: { color: 'red', price: '1000' }}">User</router-link>

И так посредством js

router.push({ query: { color: 'red', price: '1000' }})

При условии что вы уже находитесь на странице /filters получится ссылка формата /filters?color=red&price=1000

Если нужно перейти с другой страницы на страницу с фильтром, сразу его активировав, то нужно передать ещё name или path. Где name - это название страницы, например 'sales'. А path - ссылка на страницу sales которая равна '/filters'.
В итоге получится такая картина для html

<router-link :to="{ name: 'sales',  query: { color: 'red', price: '1000' }}">User</router-link> 
<router-link :to="{ path: '/filters',  query: { color: 'red', price: '1000' }}">User</router-link>

И для js

router.push({ name: 'sales',  query: { color: 'red', price: '1000' }})
router.push({ path: '/filters',  query: { color: 'red', price: '1000' }})

Более детально можете ознакомиться в официальной документации Vue Router https://router.vuejs.org/ru/guide/#html