Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
34
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

【Vue.js】Vue CLIで作成したページのtitleとdescriptionを変更する方法

【Vue.js】Vue CLIで作成したページのtitleとdescriptionを変更する方法

Vue CLIで作成したページはデフォルト状態だと、titleはプロジェクト名で全ページ共通。descriptionは存在しない状態になっている。

routerで各ページのtitleとdescriptionを設定できるようにする。

・参考にしたページ
- https://www.sky-limit-future.com/entry/vue_title_desc_tag
- https://router.vuejs.org/ja/guide/essentials/navigation.html
- https://router.vuejs.org/ja/guide/advanced/meta.html

目次

  1. 作業手順
  2. ルートにmetaフィールドを追加
  3. 共通コンポーネントapp.vueにtitleとdescriptionをセットするメソッドを追加
  4. 共通コンポーネントapp.vueにmountedオプションをセット
  5. 共通コンポーネントapp.vueにwatchオプションをセット
  6. 共通テンプレート(pubulic>index.html)にdescription属性を追加
  7. 確認用ソースコード

(参考)Vue CLIによるWEBページの作成方法

Vue CLIでWEBページを作成する方法

作業手順

  1. ルートにmetaフィールドを追加
  2. 共通コンポーネントapp.vueにtitleとdescriptionをセットするメソッドを追加
  3. 共通コンポーネントapp.vueにmountedオプションをセット
  4. 共通コンポーネントapp.vueにwatchオプションをセット
  5. 共通テンプレート(pubulic>index.html)にdescription属性を追加


1. ルートにmetaフィールドを追加

各ルートにmetaフィールドを追加して任意のプロパティをセットすることができる。

これらの情報はrouteインスタンスに格納される。

プロパティ名はわかりやすいように、title->title, description->descとする(任意)。

ファイル

router > index.js
image.png

下記のmeta部分を記述する。

script
  const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: { title: 'ページタイトル', desc: 'ディスクリプションを記述' }
  }
]


2. 共通コンポーネントapp.vueにtitleとdescriptionをセットするメソッドを追加

methodsオプションに下記を記述。
プロパティへのアクセス方法はルートインスタンス.meta.設定した変数名

titleをセットするメソッド

  • メソッド名: createTitleDesc
  • 引数でrouteインスタンスを渡す
    • 変数routeInstanceに代入している(変数名は任意)
    • 後述のmountedオプションで代入している
  • route.meta.titleで設定されているtitleを取得
  • if分岐でtitleが設定されていれば、後ろにサイト名をつけた文字列をsetTitlに格納。
  • titleタグ(document.title)にsetTitleを代入する。
App.vue
export default {
  methods : {
    createTitleDesc : function(routeInstance){
         // タイトルを設定
        if(routeInstance.meta.title){
            var setTitle = routeInstance.meta.title + ' | サイト名など(任意)';
            document.title = setTitle;
        } else {
            document.title = 'ルートでtitleがセットされていない場合に表示するテキスト'
        }
}


descriptionをセットするメソッド

基本的にはtitleのメソッドと同じ。

  • descriptionはmetaタグのname属性なので、querySelecterで要素を指定。
  • descriptionの値はcontent属性に記述するためsetAttributionで設定する。
App.vue
export default {
  methods : {
    createTitleDesc : function(routeInstance)
        // メタタグdescription設定
        if(routeInstance.meta.desc){
            var setDesc = routeInstance.meta.desc + ' | MIYACHIN VUE';
            document.querySelector("meta[name='description']").setAttribute('content', setDesc)
        } else {
            document.querySelector("meta[name='description']").setAttribute('content', 'description is not set')
        }
    } 
  }
}

3. 共通コンポーネントapp.vueにmountedオプションをセット

mountedオプションは早い段階で実行(コンポーネントやDOMを読み込むよりも早い)される。

  • routeインスタンス($rounte)を変数(routeInstance)に代入する。
  • 上記で設定したtitleとdescriptionをセットするメソッド(createTitleDesc)を実行する。
App.vue
export default {
   mounted : function(){
      var routeInstance = this.$route;
      this.createTitleDesc(routeInstance);
  }
}

4. 共通コンポーネントapp.vueにwatchオプションをセット

titleやdescriptionに変更があった場合に、変更内容を自動反映するようwatchオプションを追加する。

App.vue
export default {
  watch: { 
      '$route' (routeInstance, from) {
          this.createTitleDesc(routeInstance);
      }
  }
}

App.vueのJSソースコード

上記1〜4を合わせたコードは下記になる。

App.vue
<script>
//routerで設定したタイトルとめたタグを反映する
export default {
  methods : {
    createTitleDesc : function(routeInstance){
         // タイトルを設定
        if(routeInstance.meta.title){
            var setTitle = routeInstance.meta.title + ' | MIYACHIN VUE';
            document.title = setTitle;
        } else {
            document.title = 'title is not set'
        }

        // メタタグdescription設定
        if(routeInstance.meta.desc){
            var setDesc = routeInstance.meta.desc + ' | MIYACHIN VUE';
            document.querySelector("meta[name='description']").setAttribute('content', setDesc)
        } else {
            document.querySelector("meta[name='description']").setAttribute('content', 'description is not set')
        }
    } 
  },
   mounted : function(){
      var routeInstance = this.$route;
      this.createTitleDesc(routeInstance);
  },
  watch: { 
      '$route' (routeInstance, from) {
          this.createTitleDesc(routeInstance);
      }
  }
}
</script>

5. 共通テンプレート(pubulic>index.html)にdescription属性を追加

App.vueファイルでdescriptionを設定するためのmetaタグにアクセスする記述をしたが、デフォルトのhtmlテンプレートにはタグが存在しないため追記する。

publicフォルダのindex.htmlのheadタグ内に記載する。

image.png

.html
<meta name="description">

以下の記述で上記タグを参照することができる。document.querySelector("meta[name='description']")


確認用ソースコード

(1)router > index.js

index.js
Vue.use(VueRouter)

  const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: { title: 'ページタイトル', desc: 'ディスクリプションを記述' }
  }
]
})


(2)ルートディレクトリ > App.vue

App.vue
<script>
//routerで設定したタイトルとめたタグを反映する
export default {
  methods : {
    createTitleDesc : function(routeInstance){
         // タイトルを設定
        if(routeInstance.meta.title){
            var setTitle = routeInstance.meta.title + ' | MIYACHIN VUE';
            document.title = setTitle;
        } else {
            document.title = 'title is not set'
        }

        // メタタグdescription設定
        if(routeInstance.meta.desc){
            var setDesc = routeInstance.meta.desc + ' | MIYACHIN VUE';
            document.querySelector("meta[name='description']").setAttribute('content', setDesc)
        } else {
            document.querySelector("meta[name='description']").setAttribute('content', 'description is not set')
        }
    } 
  },
   mounted : function(){
      var routeInstance = this.$route;
      this.createTitleDesc(routeInstance);
  },
  watch: { 
      '$route' (routeInstance, from) {
          this.createTitleDesc(routeInstance);
      }
  }
}
</script>


(3) public > index.html

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <!-- 以下を追加 -->
    <meta name="description">

<link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>



以上。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
34
Help us understand the problem. What are the problem?