I'm currently facing a challenge in grasping how to pass a computed property all the way from the router to my template. Here's a simplified overview of the scenario:
const Home = {
template: '<router-link to="/level/1">Level 1</router-link>'
}
const Level = {
template: '<template>|{{ id }}|{{ message }}|</template>',
props: ['id','message']
}
const router = new VueRouter({
routes: [
{ path: '/', component: Home, props: true },
{ path: '/level/:id', component: Level, props: true }
]
})
const vm = new Vue({
el: '#app',
router,
template: '<router-view></router-view>',
computed: {
message() {
return 'HELLO';
}
}
})
Upon clicking the "Level 1" link, I anticipate seeing the following result:
|1|HELLO|
However, the actual output I receive is as follows:
|1||
The final implementation will involve more functionality than outlined here, but I hope this illustration exposes any misunderstandings I may have regarding props, routing, or computed properties.