Passing parameters between pages

Questions
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 Likes
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?

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

? - in the end of parameter means it is optional

7 Likes
11

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?

12

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.

13

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

14

Did you figure it out? I’m stumped on the same thing. I also tried page.route.params using app.page.route.params app.test.route.params (where test is the name of the page) and most every other combination I could think of. Nada.

15

Would be extremely awesome and helpful to see what you are trying (more related code examples) :wink:

16

For me, there’s just one page within the app that receives parameters. That page can be called either via a link from an href on another page or from a tap on the push notification in the shade.

If it’s from the href it has 1 parameter and if from a tap on the push notification, there are 3 parameters.

The href would look like this:

<a href='/message/14'>Message id is 14</a>

If it’s from the push notification it would like this:

<a href='/message/14/1/1'>Message id is 14, coldstart is 1 and push notification (the source) is 1</a>

Inside my router I have this:

  {
    path: '/message/:msgid/:coldstart?/:push?/',
    url: './pages/message.html',
  },

I think I have all that setup correctly, now I need to know how to access the passed parameters. I saw your ‘page.route.params’ but nothing I’m trying is working so I’m not sure what I’m missing.

17

And what is the page code? Or where do you try to access it?

18

So far just from the console.

I’m playing around with F7 trying to figure out the ins and outs and trying to learn what things I will need to port over from this older PGB project and what I need to rewrite. There’s currently a ton of code in jquery/JQM ( over 15,000 lines of javascript).

19

If anyone else comes here looking for the answer try this:

  $$('.page[data-name="about"]')[0].f7Page;
  $$('.page[data-name="about"]')[0].f7Page.name;
  $$('.page[data-name="about"]')[0].f7Page.route.params;

Inside the page div you must set the name like this:

<div class="page" data-name="about">
20

I would highly not recommend doing it in this way. Check for example how it is done in Kitchen Sink (Component Page) in the bottom: https://framework7.io/kitchen-sink/core/?theme=ios
Source code is here https://github.com/framework7io/framework7/blob/master/kitchen-sink/core/pages/page-loader-component.html

To access those params you need to access current page object or current route object. In Component, current page’s route is available as this.$route. If you are not using Component page then it should be done within page or router events, e.g.:

{
    path: '/message/:msgid/:coldstart?/:push?/',
    url: './pages/message.html',
    on: {
        pageInit: function (e, page) {
            console.log(page.route)
            const { msgid, coldstart, push } = page.route.params;
            console.log({ msgid, coldstart, push })
        }
    },
},
1 Like