What's the best way to pass an object as a route parameter?

I’d like to pass an object as a parameter to a route, as follows

{
    path: '/items/:params/',
    component: ItemListPage,
  },
<a href="/items/{title:'Title', types:['type1','type2']}">

Obviously, this won’t work since the object is passed as a string, but it explains what I want to do.

My workaround is to use the query string

{
    path: '/items/',
    component: ItemListPage,
  },
<a href="/items/?title=Items&types=type1,type2">Items</a>

And then extract the parameters from the route query on the target page

var titleString = $f7route.query.title;
var typesArray = $f7route.query.types.split(',');

That works, but is there a smarter way to do this?

you can stringify your object,
or use $f7router.navigate:

$f7router.navigate('/items/', { props: {} })

here => cool-jepsen-4pgrvz - CodeSandbox