Hello,
I have an issue implementing an idea.
I want a route that resolve over received parameters to another router and load a component with template inside.
Routes:
routes = [
{
path: '/test/:type/',
componentUrl: './pages/test.html',
},
{
path: '/test-selection-type/:type/',
async(routeTo, routeFrom, resolve, reject) {
console.log(routeTo.params.type);
if (routeTo.params.type == "poc") {
resolve(
{
componentUrl: './pages/test.html'
},
{
context: {
type: routeTo.params.type
}
}
);
}
else {
resolve({ url: 'index.html' })
}
}
},
]
test.html:
<template>
<div class="page" data-name="test">
<div class="navbar">
<div class="navbar-inner sliding">
<div class="left">
<a href="#" class="link back">
<i class="icon icon-back"></i>
<span class="ios-only"></span>
</a>
</div>
<div class="title"></div>
</div>
</div>
<div class="page-content">
<div class="block text-align-center">
<div class="block-title-big"></div>
<br />
<div class="gauge gauge-init my-gauge" data-type="circle" data-value="0.44" data-value-text="111 111"
data-size="400" data-border-width="20" data-value-text-color="#ff9800" data-border-color="#ff9800"></div>
</div>
</div>
</div>
</template>
<script>
return {
data () {
return {
type : this.$route.params.type ,
}
},
on: {
pageInit: function (e, page) {
console.log('parameter: ' + this.type )
}
}
}
</script>
link to call the dynamic route:
<a href="/test-selection-type/poc/" class="item-link item-content"><div class="item-inner"><div class="item-title-row"><div class="item-title">2</div></div></div></a>
Result over the console:
poc (the console log over the first route)
Uncaught (in promise) TypeError: Cannot read property ‘2’ of null
at parseComponent (0:11150)
at Object.parse (0:11253)
at 0:9858
if I change “componentUrl” to “templateUrl” on the resolve the page load fine but the pageInit event is never fired so I cannot use the template correctly.
What i’m doing wrong?
Thanks!