Vue-js: не срабатывает compute при изменении свойства маршрута vue-router
В моём Vue-приложении в одном из основных элементов отображается заголовок страницы. Его я передаю через vue-router в мета-данных маршрута:
const router = new VueRouter({
mode: 'history',
routes: [
...
{
path: 'create',
meta: { header: 'Create' },
...
},
{
path: ':id',
meta: { header: 'Instance' },
...
}
]
})
Обратите внимание, что в динамическом пути этот заголовок - статический. И в этом большая проблема. В каждом show-ресурсе требуется отображать не статический "Instance", а алиас, соответствующий этому экземпляру. Подставить динамически в путь его нельзя. Разве что через какую-нибудь функцию, но я так делать не хочу ибо по моему мнению это засорит код. Моё решение получилось в описанном далее виде.
Т.к. заголовок выводится в компонент через compute:
Component A:
<template>
<div>
<p>{{ header }}</p>
</div>
</template>
computed: {
header: function() {
return this.$route.meta.header
}
}
То я решил изменять его в другом элементе
Component B:
created: function() {
this.$route.meta.header = 'some test header'
},
Но проблема в том, что заголовок предательски не меняется Как был "Instance" - так им и остался... даже после того, как значение объекта $route.meta было изменено. И я проверил, что Component B видит это изменение значения. Догадываюсь, что ответ очень прост и оттого моё решение не валидно, но имею что имею. Окажите, пожалуйста, содействие в решении задачи.
Благодарю за помощь.