Passing parameters between pages


Perhaps I am too new to this framework to figure this simple thing out but I have not been able to find any consistent documentation about it.

Please could someone tell me the accepted and best way to pass variables from one page to another. I have a ‘list’ page and a ‘detail’ page. I want to pass an index from one to the other. I use a basic a tag and have set up my routes.js accordingly :

<a href="/detail/" class="item-link item-content">

The information I’ve found is mostly related to version one of Framework7. There must be a simple and neat way to do this given that everything else is so well thought out.

Please help.


view1.router.navigate (
’/viewDoctorSolicitudesChat/?code=’+solicitud_chat_id+’?msj=Solicitud aprobada
para ‘+usuario_nombre+’ ‘+usuario_apellido+’ de '+pais_nombre,
//reloadAll : true

with framework 7 v2 I use the code shown, I use function onclick step parameters and in router.navigate I attach them this is a way I hope you sive greetings!


In your route you must have kind of such route:

  path: '/details/:index/',
  url: 'something.html',

And when you navigate to /details/10/ you can access page.route.params object with passed params. There will be index: 10 property for such route


If you use a componentUrl route then it will be available as this.$route.params.index inside of component


Thank you. I came to the same conclusion a few hours ago and didn’t get round to writing in here.

One slightly related but not so much related question : how do I access a function defined under methods in the var app = new Framework7({}) call? I put functions there that I need regularly throughout the app and I know I can use self.$root.functioName() … But I’m not sure how to access this in my app.js file.


Hey @juliusbangert

You´ve tried ?

app.functioName() ?

You can use console.log(app);


Thanks @DanielRiera. Yea I tried that. The function I define under methods is not accessible through app.function() When I call console.log(app) I can see it referenced in app.methods.function() … Is this unexpected?



Your app variable is

var app = new Framework7({
      methods: {
            miFunction: function() {


If is this, yes is a object and this function is available from app.methods.miFunction().



How do you handle calls to pages in a link where sometimes you want to pass a parameter and sometimes you don’t? I have a map page and in some places I want to link to it as is and in some places I want to pass a code. I have tried adding an alias but this is not working.

    path: '/map/code/:code/',
    alias: '/map/',
    componentUrl: './pages/map.html',
    name: 'map',

<a href="/map/" class="panel-close">My Location</a>

And other times:
<a href="/map/code/{{branch.code}}/">View on map</a>

Any thoughts?

  alias: '/map/',
  path: '/map/code/:code?/',

? - in the end of parameter means it is optional


when i try to access this.$route.params on the component page i get “Cannot read property ‘params’ of undefined”. Any idea why that would be?


Where do you use “this.$route.params” ?
Inside component lifecycle hooks, the components methods or “on” events (such as pageInit) this.$route.params should exist.


Nice, I was not aware of the optional parameters :slight_smile: