Передайте параметр в Vue мета-заголовок маршрутизатора

Question

Я пытаюсь создать динамический заголовок c для маршрута Vue. Кажется, я не могу найти способ передать параметр в мета-заголовок. Мне это нужно, потому что у меня есть компонент VueHeader, который отображает заголовок из мета-заголовка маршрута. Вот мой код:

  {
    path: '/case/:id',
    name: 'edit-case',
    component: VueEditCase,
    meta: {
      title: 'Edit case ' + $route.params.id,
    },
  },

Однако я получаю сообщение об ошибке Uncaught ReferenceError: $route is not defined. То же самое происходит, если у меня есть title: 'Edit case ' + this.$route.params.id или title: 'Edit case ' + route.params.id или title: 'Edit case ' + this.route.params.id. Я также пробовал title: 'Edit case ' + ':id', et c.

Я не смог найти никакого ответа по номеру rnet, поэтому я прошу вашей помощи здесь, ребята. Кто-нибудь сталкивался с подобной проблемой и решил ее?

Вот изображение других рабочих маршрутов:

Вот изображение того, как я отрисовываю метаданные заголовок в заголовке:

Вот как выглядит заголовок при вводе соответствующих примеров маршрутов:

Answer 1

Я когда-то пытался совершить sh то же самое, но, к сожалению, я думаю, что это невозможно. Как говорит этот парень на GitHub , мета маршрутизатора намеренно установлена ​​c.

Если вы пытаетесь сделать тег <title> документа динамическим c, я бы предложил вам попробуйте Vue -Meta . Я действительно люблю этот плагин и использую его в каждом Vue SPA-проекте.

Answer 2

Можно установить мета-значение следующим образом:

this.$route.meta.title = "Your title";

В вашем случае вы можете наблюдать за изменениями маршрута от любого из родительских компонентов и устанавливать мета-значение.

    watch: {
        // watching the route
        '$route': function () {
            // if params and id
            if (this.$route.params && this.$route.params.id) {
                this.$route.meta.title = "Your title " + this.$route.params.id;
            }
        }
    }

Answer 3

я думаю, что это может помочь вам, напишите это в mounted hook файла

mounted() {
  document.title = "Edit Case " + this.$route.params.id
}

, дайте мне знать, если это сработало для вас так же, как для меня

Answer 4

Я думаю, что это может помочь вам, вместо импорта мета-заголовка из файла маршрутизатора, вы можете создать его в своем файле.

<h1>{{ "Case Detail " + $route.params.id }}</h1>

Отредактировано для вашего состояния, которое очень специфично c:

Вы можете попробовать одну вещь, если ваш Компонент заголовка - это другой компонент, вы можете передать ему идентификатор в качестве реквизита, так что он будет иметь идентификатор и отображать ваш динамический заголовок c только тогда, когда идентификатор доступен, а для элементов Dashboard и Service вы можете поставить условие, когда идентификатор является нет в наличии

Answer 5

попробуйте this.$route или

console.log(window.location) там и посмотрите, как вы можете получить идентификатор оттуда