[v6] (core) pass props || context to route via link

v6.0.17

hello,
i cant pass context to a page via link

in v5 i used to pass context with:

<a class="item-link" href="/route1/" data-context='{"dummy": "dummy"}'>

in v6, context is gone
there is only “props”.

when i try this:

<a class="item-link" href="/route1/" data-props='{"dummy": "dummy"}'> 

it gets parsed as a key:value forEach character

{0: "{", 1: """, 2: "d", 3: "u", 4: "m", 5: "m", 6: "y", ...}

for now i use “generateUrl” and pass the data as a “query”.
is there any other/clean way to pass context to page?

here is my code

var routes = [
  { path: '/route1/', component: Component },
  { path: '/route2/', component: Component },
  { path: '/route3/', component: Component }
];
var list = [
  { path:'/route1/', title:'route1 title' },
  { path:'/route2/', title:'route2 title' },
  { path:'/route3/', title:'route3 title' }
];
<div class="list">
  <ul>${list.map((item) => $h`
    <li>
      <a class="item-content item-link" 
         href="${$f7router.generateUrl({path: item.path, query: $f7.utils.extend({},item,{dummy: 'dummy'})})}">
        <div class="item-inner">
          <div class="item-title">${item.title}</div>
        </div>
      </a>
    </li>`)}
  </ul>
</div>

You can use APIs to do that as well by assigning custom click handler like so:

<a @click=${() => $f7router.navigate('/route1/', { props: {foo: 'bar'} })} ...>

thank you
btw, ‘Store’ is amazing

1 Like