Vue вычисляемое свойство в шаблоне роутера - PullRequest
Новая
       24

Vue вычисляемое свойство в шаблоне роутера

0 голосов
/ 20 апреля 2020

У меня проблемы с пониманием, как получить вычисленное свойство на всем пути через маршрутизатор к моему шаблону. Вот базовое c представление о том, что я делаю: 

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 ||

Окончательное использование будет немного более функциональным, чем это, но, надеюсь, этого достаточно, чтобы разоблачить то, что я не понимаю в отношении реквизита, маршрутизации или вычисляемых свойств.

1 Ответ

1 голос
/ 20 апреля 2020

Существует 2 проблемы:

1) Ошибка:

Невозможно использовать <template> в качестве элемента компонента root, поскольку он может содержать несколько узлов.

Так что измените это на div. При использовании CLI Vue шаблоны заключаются в <template>, но внутри него все еще должен быть другой элемент root.

2) Компонент Level имеет реквизит, называемый message но это не прошло. Маршрут Home проходит id, но не message. Home не может передать message в данный момент, потому что он находится в компоненте root, а Home не получил его.

Вы можете:

  • Используйте Vuex, чтобы решить это наиболее чисто
  • Определите message в Home вместо root и передайте его Level
  • Передайте message из root до Home, а затем снова от Home до Level
...