[Question] How to access $route.params from the page component code?

[meteozond]

I've confused a lot with bringing dynamic routes to work with in AF.

Creating dynamic route:

  {
    "path": "/track/:index/",
    "component": "track.vue"
  },

Creating component track.vue:

<template>
  <f7-page>
    {{ $route.params.index }}
  </f7-page>
</template>
<script>
  export default {
    props: ['index'],
    created: function () {
      try {
        console.log("this.$route", this.$route)
      } catch (err) {}
    }
  }
</script>

And all I'm getting is _vm.$route is undefined and this.$route is undefined. What am I downing wrong?

[meteozond]

Oh crap! Looks like I'm completely stupid, it took me half a day to figure it out! Look like Dynamic Route Matching require these options in config.json:

  "framework7parameters": {
  	"pushState": true,
  	"allowDuplicateUrls": true
  }

Without pushState it won't add $route attribute to the page instance, without allowDuplicateUrls you won't be able to open several pages with the same route template.

Shouldn't it be documented at least anywhere?

[scriptPilot]

Good hint, even it's Framework7 related I will add it to the docs - thanks @meteozond

[meteozond]

Looks like F7 is completely unusable and requires a lot of tricky manipulations to make it work properly without these features, so as for me it should be enabled by default.

[scriptPilot]

Good point, consider as as bug now.