Passing parameters between pages


#1

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.


#2

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!


#3

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


#4

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


#5

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.


#6

Hey @juliusbangert

You´ve tried ?

app.functioName() ?

You can use console.log(app);


#7

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?


#8

Hey

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().

Regards!


#9

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',
  },

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

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

Any thoughts?


#10
{ 
  alias: '/map/',
  path: '/map/code/:code?/',
}

? - in the end of parameter means it is optional