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

当我单击“级别1”链接时，我希望看到的结果是：

| 1 | HELLO |

我实际看到的结果是：

| 1 ||

最终用法将比此功能更具功能性，但希望足以暴露我不了解道具，路由或计算属性的所有内容。

Answer 1

有2个问题：

1）出现错误：

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

因此将其更改为div。使用Vue CLI时，模板被包装在<template>中，但模板内部仍然需要其他根元素。

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

您可以：

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

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

1 个答案: