路由器模板中的 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||

最終的用法會比這更實用一些，但希望這足以暴露我對道具、路由或計算屬性不了解的任何內容。

Answer 1

有2個問題：

1）有一個錯誤：

不能使用<template>作為組件根元素，因為它可能包含多個節點。

因此，將其更改為div 。 使用 Vue CLI 時，模板被包裹在<template>中，但其中仍然需要有不同的根元素。

2) Level組件有一個名為message的道具，但沒有通過。 Home路由通過id但不通過message 。 Home目前無法傳遞message ，因為它在根組件中，而Home沒有收到它。

你可以：

• 用Vuex最干凈的解決這個問題
• 在Home而不是 root 中定義message並將其傳遞給Level
• 將message從 root 傳遞到Home ，然后再從Home傳遞到Level