路由模板中的Vue计算属性 [英] Vue computed property in router template

问题描述

我无法理解如何通过路由器将计算属性一直传到我的模板.这是我正在做的事情的基本想法:

I'm having trouble understanding how to get a computed property all the way out through the router to my template. Here's a basic idea of what I'm doing:

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';
    }
  }
})

当我点击Level 1"链接时，我希望看到的结果是:

When I click the "Level 1" link, the result I expect to see is:

|1|你好|

我实际看到的结果是:

|1||

最终的用法将比这更实用，但希望这足以暴露我对 props、路由或计算属性不了解的任何内容.

The final usage will be a bit more functional than this, but hopefully that's enough to expose whatever it is that I'm not understanding about props, or routing, or computed properties.

推荐答案

有2个问题:

1) 出现错误:

不能使用