vue-routerのタイトル・メタタグを反映するmixins

健康診断でバリウムを飲んだ後はその日一日中腹痛で仕事になりゃしません。あれどうにかならないんですかね。

それはさておき、最近一般に公開されるような業務が少なくてつい忘れがちだったのですが、そういや普通はdescriptionも設定する必要あるんだよな、と思ってmixinsを作って満足したので備忘録として残しておきます。最近はmeta keywordsはもうほぼ意味がないとのことで自身でもとんと設定した覚えがないのですが、恐らく同じ形で設定出来るかと。

routerでmeta情報をもたせておく

/router.jsまたは/router/index.jsなどこの辺はプロジェクトによって違うと思いますが、持たせ方は変わりません。title、descriptionと考えるのが面倒一般的な名前でここでは持たせましたが、わかりやすければ何でもいいと思います。

router/paths.js

export default [
  {
    path: '/',
    name: 'home',
    component: () => import('@/views/Home.vue'),
    meta: { title: 'pageTitle', description: 'This is page description.' },
  },
];

mixinsとして作る

routerに書くにもなんですし、App.vueに書くのも不躾な気がするので、mixinsにおいてしまいましょう。main.jsに宣言を忘れずにしておきます。

main.js

Vue.mixin(globalMixins);

titleタグを更新するmixinsの用意

mixins/index.js

/**
 * ページタイトル設定
 * @param pathTitle
 * @returns {string}
 */
export const setTitle = pathTitle => {
  const siteTitle = 'WebPage';
  const pageTitle = !pathTitle ? siteTitle : pathTitle + ' | ' + siteTitle;
  return (window.document.title = pageTitle);
};

タイトルタグがルーティングで指定されていれば「ページタイトル | サイトタイトル」、タイトルタグの指定がなければサイトタイトルのみをtitleタグに反映するようにします。この辺はプロジェクトに合わせて整形して渡してあげます。サイトタイトルはここで指定するのではなく、どこかで一元管理するのが正解かと思われますが、取り急ぎはこんな形で。

descriptionを更新するmixinsの用意

mixins/index.js

/**
 * Description設定
 * @param pathMeta
 */
export const setDescription = pathMeta => {
  const defaultDescription = 'This is initial description.';
  const description = pathMeta ? pathMeta : defaultDescription;
  document
    .querySelector("meta[name='description']")
    .setAttribute('content', description);
};

こちらも考え方は同様に。留意点として、public/index.htmlでdescriptionのフィールドを作っていないとこけます。最初ものの見事にハマってました。

exportする

mixins/index.js

export const globalMixins = {
  methods: {
    setTitle,
    setDescription,
  },
};

exportしておきます。

router側の制御

router/index.js

import { setTitle, setDescription } from '@/mixins';

router.beforeEach((to, from, next) => {
  setTitle(to.meta.title);
  setDescription(to.meta.description);
  next();
});

先程作ったmixinsをimportしておいて、ルーティング時にナビゲーションガードで呼び出して、タイトル、ディスプリプションの更新を行ってから遷移するようにします。

確認

META SEO inspectorで見てみたところ、無事反映されているようです。

処理の置き場に困ったらとりあえずmixinsみたいな発想も我ながら雑だとは思いますが、やってること自体は特にそれ以上でもそれ以下でもない感じなので、今回はこのへんで。