Routing within one page?

Question

Vue.js

For example, I have a page with filters, /filters
I want each filter to have its own parameter /filters?color=red&price=1000
Or even like this /filters/advancedMode?color=red
What is the best way to do this in Vue js?

Answer 1

If you use vue router then you can do this for html

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

And so with js

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

Provided that you are already on the /filters page, you will get a link of the /filters?color=red&price=1000 format
. Where name is the name of the page, such as 'sales'. And path is a link to the sales page which is equal to '/filters'.
As a result, you get such a picture for 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>

And for js

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

For more details, see the official Vue Router documentation https://router.vuejs.org/en/guide/#html