vue-routerのtitleタグをページごとに変更

 <%= htmlWebpackPlugin.options.title %>

を変えるのになんだかすごい複雑なことをしているページばかり出てきてて、「いや、このjs使ったら絶対そんな面倒なことしなくてええやろ」とおもったらちゃんとあったので、自分が使った方法をまとめた。これを行う前に、routerが正常に動くまでを実装しているものとして書いている。

前提環境

@vue/cli: 4.5.10
vue-router: 4.0.3

実際に書いたコード

rooter.js:(わたしの環境では/src/rooter/index.js)

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home,
    meta: { title: 'Index Page' }
  },
  {
     path: '/about',
     name: 'about',
     component: () => import(/* webpackChunkName: "about" */ '../views/about.vue'),
     meta: { title: 'About' }
   },
]
 const DEFAULT_TITLE = 'Default Title'
 const router = createRouter({
   history: createWebHistory(process.env.BASE_URL),
   routes
 })
 router.afterEach((to, from) => {
   document.title = to.meta.title || DEFAULT_TITLE
 })
 export default router

参考文献

vue-routerを使用するときにページタイトルを変更するには?：https://www.366service.com/jp/qa/4fb1f311823a2112bb895584c077ef97