How to send a variable to componentUrl page?

How can I send and receive a variable to a page loaded with componentUrl?

If I send the below to an ordinary page it works but not if the page in my routes file is a componentUrl?

In my routes.js.

{
name: ‘diagram’,
path: ‘/diagram/’,
componentUrl: ‘./statistik/diagram.asp’,
options: {
//animate: true,
ignoreCache:true,
//reloadCurrent:true,
force:true
},
},

In my app.js file.

$$(document).on(‘page:init’, ‘.page[data-name=“diagram”]’, function (e) {
var page = e.detail;

$$(page.el).on("click",".sokstatistik", function() {	
	var statistikmanaden = $$(page.el).find('input[name=statistikmanad]').val()

	app.dialog.alert(statistikmanaden)//this is getting the right value...

	mainView.router.navigate("/diagram/?statistikmanad="+statistikmanaden, {ignoreCache: true, reloadCurrent:true, force:true});

});

});

And in my diagram page I just do a themanad=request.querystring(“statistikmanad”)

And It is not reloading the diagram page at all, I can’t see it in the DOM and off course the variable themanad is not getting any value.

So what am I missing?
Any input really appreciated, thanks.

componentUrl: ‘./statistik/diagram.asp?key=value',
in router component:
this.$route.query.key

Thanks shastox, but I don´t understand what you mean Im afraid.
I can´t use

componentUrl: ‘./statistik/diagram.asp?key=value’,

as a static value, and yes I tested and it sends the value to the page when I load the page the first time, but I have an input where you are suppose to write a month number and I want to reload the page and send that value so I can select the data from my db based on what month you have written.

And I don´t understand why

mainView.router.navigate("/diagram/?statistikmanad="+statistikmanaden, {ignoreCache: true, reloadCurrent:true, force:true});

is not reloading the page at all?

What do you mean with

in

router component:

this.$route.query.key

Check docs for route.url https://framework7.io/docs/routes.html#route-properties it can bypass router parameters to requested url

Also view has passRouteQueryToRequest https://framework7.io/docs/view.html#view-parameters

Thanks Vladimir. But I can´t get the test link to work.

I have set passRouteQueryToRequest : true, in my app init code. And then I created a test link <a href="/diagram/?statistikmanad=7"> test</a> in the page.

And in my routes.js I have

{
name: ‘diagram’,
path: ‘/diagram/’,
componentUrl: ‘./statistik/diagram.asp’,
options: {
//animate: true,
ignoreCache:true,
reloadCurrent:true,
force:true
},
},

And it seams like it reloads the page, but I can only see 1 diagram.asp page in the resources inspector? When I do the same with a normal page I can see 2 diagram.asp pages!?

So if I can have
/diagram/?statistikmanad=7
in a link why can’t I have
mainView.router.navigate("/diagram/?statistikmanad=7", {ignoreCache: true, reloadCurrent:true, force:true});
This is the way I load all my pages and it works, why does´t it work when I use a

> componentUrl: in my routes.js instead of just url:?

Thanks a lot

I looked at route.url https://framework7.io/docs/routes.html#route-properties
Should my routes.js look like this or? I clearly don´t get how it works haha, sorry!

{
name: ‘diagram’,
path: '/diagram/:statistikmanad',
componentUrl: ‘./statistik/diagram.asp’,
options: {
//animate: true,
ignoreCache:true,
reloadCurrent:true,
force:true
},
},

Components are cached, you can disable it in View parameters

And check docs links I sent before, looks like your are missing what is a query and what is parameters, both links has correct examples

Ok if we start with testing passRouteQueryToRequest the docs say

When enabled then router will pass current route parameters to request url query (for  `**url**` ,  `templateUrl`  and  `**componentUrl**`
 If you have the following route:
 
 `{ path: '/somepage/', url: 'http://myserver/page/' }`
 
 and you will click link with  **/somepage/?foo=bar**  url then it will load page from  **http://myserver/page/?foo=bar**  url 

So I have a link in my diagram.asp page that looks like this.

<a href="/diagram/?statistikmanad=7" data-force="true" data-ignore-cache="true" data-reload-current="true"> test</a>

And in my app view parameter I have set.

view: {
	componentCache: false
  },

And my routes.js looks like this.

{
	name: 'diagram',
    path: '/diagram/',
    componentUrl: './statistik/diagram.asp',
    options: {
        //animate: true,
		ignoreCache:true,
        reloadCurrent:true,
		force:true
      },
  },

And in my diagram.asp page I have statistikmanad=request.querystring("statistikmanad")

Now, when I click the link it looks like it reloads the page(still just having 1 diagram.asp page as a resource ) and the request.querystring("statistikmanad") is not getting the value 7.

What is wrong here? What am I doing wrong? If I do the same thing with a url instead of componentUrl then it works as it should?

Thanks for your help.

With this it is loading the cached version, how to reload a new page when using componentUrl? Im using V3. If I use just url than it works, but not when I use componentUrl.
According to the docs it should work the same way, but it only load the cached one with componentUrl. No matter what I try it is loading the cached version?!

Or what am I missing?

I really appreciate some help with why it is loading the cached version of the page?