Каким образом вывести (интерполировать) данные из переменных в title?

Question

[ReActor Дмитрий Вершанский]

Необходимо управлять title'ом каждой отдельно взятой страницы приложения на vue js. Строковые данные хочу интерполировать в него, через данные переменных.

Не могу организовать взаимодействие переменных и объекта title - страницы. Использую структуру однофайловых компонентов.

В каком хуке жизненного цикла "заводить" title:
computed, mounted, или может быть в объекте data?

Как именно должна (может быть) выглядеть запись конструкции: document.title или просто title?

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

P.S. Vue meta не предлагать.

Answer 1

[Aetae]

Ну например глобальный миксин приблизительно такого вида:

{
  beforeCreate() {
    this._oldTitle = document.title;
  },  
  unmounted() {
    if (this.PAGE_TITLE)
      document.title = this._oldTitle;
  },
  watch: {
    PAGE_TITLE: {
      handler(val, oldVal) {
        if (val)
          document.title = val;
        else
          document.title = this._oldTitle;
      },
      immediate: true
    },
  }
}

И в компоненте управляешь просто свойством this.PAGE_TITLE.
Или в случае composition api:

const PAGE_TITLE = ref('<title>'); // computed(() => ...)
// ...
return { 
  PAGE_TITLE,
  // ...
}

и в случае script setup/render:
+ expose({ PAGE_TITLE })

Особенность в том, что управление title тут заберёт последний загруженный компонент имеющий PAGE_TITLE, что может привести к багам если на одной странице таких окажется два.

У меня есть где-то самописка которая делает подобное но с учётом роутера и иерархии, и это уже, увы не так просто.:)

P.S. Вообще на таком примитивном уровне можно просто использовать document.title напрямую и не париться. Подход с миксином имеет смысл если этот title вы используете ещё где-то в приложении глобально.

Comments

[ReActor Дмитрий Вершанский]

Добрый день.
Благодарю за Ваш ответ.

Я могу попросить Вас отобразить именно такой вариант, который советуете в p.s.
с document.title , именно на него я нацелен изначально.

Загвоздка в том, что я не могу сформировать конструкцию таким образом, чтобы забирать строку из переменной, которая формируется в исчисляемых свойствах компонента (computed) и интерполировать её значение в document.title

[Aetae]

ReActor Дмитрий Вершанский, если нужно именно из computed, а не руками, то смотри основной ответ.
Без миксинов - то же самое просто написать в самом компоненте, заменив PAGE_TITLE на название вашего вычисляемого свойства.

[ReActor Дмитрий Вершанский]

Aetae, выражаю благодарность!