Home > Software design >  Vue 3 - Best way of using URL parameters for bookmark (like filtering)
Vue 3 - Best way of using URL parameters for bookmark (like filtering)

Time:09-27

I want to extend my application with a URL parameter functionality:

  • If a filter is activated, the URL needs to be updated
  • If someone goes directly to the URL you should get the same data as you filtered manually

I see different ways in this world:

  • The parameter story based on: domain.com/?status=pending&relation=1
  • Clearer/neat way: domain.com/filter/status:pending/relation:1

I'm more looking for the last example. How can I do this within Vue? I am currently working as an example within Router with props: route => ({ query: route.query }).

Can someone help me and maybe others on my way to realize this?

CodePudding user response:

It dependes....maybe is better to create an api that refresh your table...

In this way you pass the parameter to the api that will get you the book array, and in this way you refresh your content...

In this way you will have a url like:

domain.net/page?f=1p=filterparamete

Or you can use vue dynamic routing

/page/:filter/:filter_value

But in this case you shold have a fixed url structure in case of multiple filter setting..

In any case the first way is the most easy and scalable way...

CodePudding user response:

You can use the query-string lib to parse URL parameters and then just filter items by params

const queryString = require('query-string');
console.log(location.search); // '?status=pending'
const parsedParams = queryString.parse(location.search);
console.log(parsedParams) // { status: 'pending' };
  • Related