Nuxt•3mo ago

pretty urls for e-commerce shop

I have a url structure like this. https://www.myshop.com/beer/red-ale/england?page=2 but I want a more pretty url like this https://www.myshop.com/beer/red-ale/england/2 ?
beer is a category red-ale and england are optional filters 2 is a optional pagenumber my folder looks like [category]/[...filters].vue At the moment I just think to check if the last parameter in the array is a number

if (Number(params[params.length - 1])) {
  console.log("I'm a pagenumber");
} else {
  console.log("I'm a filter");
}

if (Number(params[params.length - 1])) {
  console.log("I'm a pagenumber");
} else {
  console.log("I'm a filter");
}

this works only if there are no filters with numbers... and also only for pagenumbers, if I want to add "sort" to the url https://www.myshop.com/beer/red-ale/england/new-arrival/2 it also doesn't work there are other options to handle this? or is this the way to go https://www.myshop.com/beer/red-ale/england?page=2&sort=new-arrival cheers, gregor

2 Replies

Mads•3mo ago

Why not use a folder structure like this /[category]/[subcategory]/[subsubcategory]/[product] It sounds like you need to define a structure. Also use useRouter() to extract the queries and params. Much easier.

GregorOP•3mo ago

Because there are no categories only products with properties that I can filter. The way

?page=2&sort=new-arrival

?page=2&sort=new-arrival

is ok, was just thinking if there is a more beauty way

Gaming

Programming

pretty urls for e-commerce shop