路由器模板中的 Vue 计算属性

Question

我无法理解如何通过路由器一直到我的模板获取计算属性。这是我在做什么的基本想法：

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”链接时，我期望看到的结果是：

|1|你好|

我实际看到的结果是：

|1||

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

Answer 1

有两个问题：

1) 出现错误：

不能使用<template> 作为组件根元素，因为它可能包含多个节点。

所以把它改成div。使用 Vue CLI 时，模板被包裹在 <template> 中，但其中仍需要有不同的根元素。

2) Level 组件有一个名为 message 的道具，但它没有通过。 Home 路由通过 id 但不通过 message。 Home 目前无法通过message，因为它在根组件中，而Home 没有收到。

你可以：

• 使用 Vuex 最干净地解决这个问题
• 在Home 中定义message 而不是根并将其传递给Level
• 将message 从根传递到Home，然后再从Home 传递到Level