How to access URL parameters inside script tag in framework7

Question

I am using the latest version of Framework7. And this is what I am trying to do:

In my route.js

{
   path: '/guest_course/:id/',
   componentUrl: './pages/course-detail-guest.html',
},

In my .html page, I can access the value like this: <h5> ${$f7route.params.id} </h5>

My question is- can I access this parameter inside script tag like this -

<script>
 var userID = ${$f7route.params.id};
 alert('User Id is: '+userID);
//I need to send post request to API server using var userID
</script>

So far I have tried - var userID = ${this.$f7route.params.id}; , var userID = $f7route.params.id;, var userID = $f7route.query.id; , var userID = this.$route.query.id; and etc. None of them works. Please suggest if this is possible.

Answer 1

Finally I made it myself after going through framework7 documentation several times. Actually, I tried to post this question on Framework7's forum where, most of the time, the developer himself provide an answer but every time I tried to login, it gives me the error "You can't login with this IP Address". Also there are few questions on the Framework7 forum which address my question but unfortunately there is no proper answer for e.g. this question - See the question. So I posted this question on StackOverflow.

Anyway, I am posting the answer so someone like me can find it useful and helpful. The correct way to access the URL parameter (if similar to my situation) is props.id

For example:

<script>
export default (props) => {
    var userID = $f7route.params.id; //This will not work, I tried.
    var userID = $route.params.id; //This too will not work
    var userID = props.id; //This works ;-)
    console.log('User ID: '+UserID);
 })
</script>