vue.js + vue-router で任意のタイミングでページタイトルを変更する

こちらのページを参考にさせて頂きましたが、私は下記のような改造しました。

  • ページ読み込み直後だけでなく、任意のタイミングでページタイトルを変更できるように変更処理をメソッド化(非同期でバックエンドからデータを取ってきてそれをタイトルに反映するといった処理を想定)
  • document.titleオブジェクトの更新だけではなく、.update-titleクラスNodeListの更新もサンプルとして追加
  • this.$options.titleは変数でもfunctionでも定義できていたが処理をシンプルにするために関数一択

タイトルを管理するmixinを構築する

export default {
data() {
return {
title: ""
};
},
methods: {
// このメソッドを呼べばいつでも更新できmountedも結果的にはこれをコールしているだけ
updateTitle(str) {
document.title = `${str} - brandName`;
document.querySelectorAll(".update-title").forEach((it) => {
it.innerHTML = str;
});
}
},
mounted() {
// 起動時にtitle()が実装されているならコールする
if (this.$options.title !== undefined) {
let title = this.$options.title();
if (title) {
this.updateTitle(title);
}
}
}
};

mixinを読み込む

最も根幹の部分で読み込んでおけば自動的にすべてのコンポーネントで動作するし、特定のページのみで動作させたければ特定のコンポーネントだけで読み込んでも良いが、わかりやすく今回は根幹部分で読み込む。

import Vue from 'vue'
import RootComponent from "./components/root.vue";
import TitleMixin from "./mixin/title"
Vue.mixin(TitleMixin)
let v = new Vue({
router: router,
components: {"root-component": RootComponent }
}).$mount('#app');

各ページで固定タイトルを設定する

予めタイトルが決まっている場合は下記のように定義すると、このコンポーネント起動時のmoutendの処理でタイトルが設定されます。

export default {
title() {
return "ページタイトル";
}
data(): { return {} },
methods: {}
};

各ページで動的にタイトルを設定する

AjaxでJSONとしてページのデータを取ってきて、取得したページタイトルでページのタイトルを更新する場合は、固定タイトルを設定した時のようにtitle()を定義せずに、任意のタイミングで自分でthis.updateTitle()をコールします。

import Ajax from "./ajax.ts";
export default {
data(): { return {} },
methods: {
Ajax.Get('/page.json').then((info) => {
this.updateTitle(info.title);
});
}
};

メモ

  • コードはTypeScriptで管理しています
  • もうちょっとvuejs側で管理してもらう機構があってもいいかなと思いました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA