Router context Q

Questions
1

Unsure why I can’t pick up the formdata on the next page as expected.

this.$f7router.navigate('/create/' + formData), {
          context: {
            title: formData.title,
            author: formData.author,
          }

On the create page, I have:

         title: this.$f7route.context.title

However it’s not pulling through as expected. Any thoughts?

@nolimits4web - sorry to @ you, but would you mind advising?

2

Shouldn’t it be
app.views.main.router.currentRoute.context.title

3

Not for my Vue set-up. When I pass context in routes.js, ie:

        component: CreatePage,
      },
      {
        context: {
          objTest: objTest,
          title: titleid,

I can access them as expected (this.$f7route.context.objTest, etc.), just not when passing via .navigate. I would have expected it to work in the same way.

4

In Vue components you need to pass them as Vue components props, e.g.:

this.$f7router.navigate('/create/' + formData, { props: { foo: 'bar' }});

And in target router component add props:

props: {
 foo: String,
},

They will be avialable as this.foo in target component

6

Thanks, @nolimits4web! I now have the next error to debug which is:

this.foo: ƒ String() { [native code] }
vue.esm.js:629 [Vue warn]: Invalid prop: type check failed for prop “foo”. Expected String with value “function String() { [native code] }”, got Function

The hunt continues, but I feel much closer!

7

Final solution for anybody wondering, I had put props in my router as well as the target component. That was causing the issue. I only needed it in in the components, not the router. Thanks so much to @nolimits4web for an awesome framework and being so helpful!!!