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 видит это изменение значения. Догадываюсь, что ответ очень прост и оттого моё решение не валидно, но имею что имею. Окажите, пожалуйста, содействие в решении задачи.

Благодарю за помощь.


Ответы (0 шт):