Framework7 pass object as params between pages

Question

How can I send an array object between pages in Framework7? I can send variable values but cannot understand how to send objects?

I have an array object like this

    "phoneNumbers": [{
        "number": "(555) 564-8583",
        "normalizedNumber": "(555) 564-8583",
        "type": "MOBILE"
    }, {
        "number": "(415) 555-3695",
        "normalizedNumber": "(415) 555-3695",
        "type": "OTHER"
    }]

In route.js

  {
    path: '/contact/:id/:phoneNumbers/',
    componentUrl: './pages/contact.html',
  },

index.html

<a href="/contact/{{this.id}}/{{this.phoneNumbers}}/"></a>

contact.html

  <p>{{this.$route.params.id}}</p>
  <p>{{js 'return JSON.stringify(this.$route.params.phoneNumbers)'}}</p>

In contact.html it doesnt show the array object, instead it returns this

"1"
"[object Object],[object Object]"

I want to know if it is possible to send objects using Framework7's router?

Alternate approach I took was using localStorage, but is there a way in Framework7 to send objects between pages and not only variables?

Answer 1

It depends on the specifics of your use case but usually I make the data I want to pass global to the app by placing it in the javascript window object. It will be available to your code on the subsequent page(s) the user enters. It's more efficient than using localstorage.

window.phoneNumbers = [{
        "number": "(555) 564-8583",
        "normalizedNumber": "(555) 564-8583",
        "type": "MOBILE"
    }, {
        "number": "(415) 555-3695",
        "normalizedNumber": "(415) 555-3695",
        "type": "OTHER"
    }]