Component page is alos compiled with Template7, but it has much more functionality. In addition to Template7 page it has lifecycle hooks, events handling and data managment.
It is useful to use Component page when you need page-specific logic.
Events Handling
Page Component Data
Hello! My name is {{name}}. I am {{age}} years old.
I like to play:
-
{{#each like}}
- {{this}} {{/each}}
Route Context
Context can be passed in route options
- foo: {{foo}}
Extended Context
Component page context as Template7 page context is also extended with some additional variables.
$route
Contains properties of the current route:
- $route.url: {{$route.url}}
- $route.path: {{$route.path}}
- $route.params: {{js 'return JSON.stringify(this.$route.params)'}}
- $route.hash: {{$route.hash}}
- $route.query: {{js 'return JSON.stringify(this.$route.query)'}}
- $route.context: {{js 'return JSON.stringify(this.$route.context)'}}
$root
Root data & methods:
- $root.user.firstName: {{$root.user.firstName}}
- $root.user.lastName: {{$root.user.lastName}}
- $root.helloWorld()
$theme
Currently active theme:
- $theme.ios: {{$theme.ios}}
- $theme.md: {{$theme.md}}