vueブラウザのタイトルtitleの変更

方法1:第一歩:main.jsにグローバルコマンドを追加
Vue.directive(‘title’,{inserted:function(el,binding){document.title=el.dataset.title})第2歩:呼び出すコンポーネントの中で、勝手にdivを探して次のコードを加える
v-title data-title=「私の」

<template>
    <header class="header_home user_reg" v-title data-title=""> 
   <div class="top_box hidden-xs"> 
    <div class="container"> 
      <router-link to="/" class="logo"> 
        <img src="../../../assets/image/5b10f166c3332.png" alt="" /> 
      </router-link> 
     <ul class="navs">
        <li>
            <router-link to="/regist">  </router-link>
        </li> 
        <li>
          <router-link to="/login">  </router-link>
        </li> 
        <li>
          <router-link to="/CooperUser">    </router-link>
        </li> 
     </ul> 
    </div> 
   </div> 
  </header>
</template>

方法2:実現構想は簡単である:ルーティングのガイドガードbeforeEachを利用してページジャンプのたびに対応するtitleを変更する
ステップ1:まずrouteで各ルーティングにmetaプロパティを追加します

{
            path: '/login',
            name: 'login',
            component(resolve) {
                require(['./views/login.vue'], resolve)
            },
            meta: {
                title: '   ',
                keepAlive: true, //      
            }
        },
        {
            path: '/regist',
            name: 'regist',
            component(resolve) {
                require(['./views/regist.vue'], resolve)
            },
            meta: {
                title: '   ',
                keepAlive: true, //      
            }
        },
        {
            path: '/newList',
            name: 'newlist',
            component(resolve) {
                require(['./views/newsList.vue'], resolve)
            },
            meta: {
                title: '    ',
                keepAlive: true, //      
            }
        }

ステップ2:main.jsにナビゲーションガードを付ける
router.beforeEach((to,from,next)=>{window.document.title=to.meta.title==undefined?‘デフォルトタイトル’:to.meta.title if(to.meta.requireAuth){let token=Cookies.get(‘access_token’);let anonymous=Cookies.get(‘user_name’);if(token){

            next({
                path: '/login',
                query: {
                    redirect: to.fullPath
                } 
            })
      
    }
}
next();

})方法3:1.プラグインをインストールし、コマンドラインでcnpm install vue-wechat-title--saveを実行するとインストールできます.2.参照プラグイン、main.jsでは、まずimportしてからuseすればいいです.具体的なコードは以下の通りです.
import VueWechatTitle from ‘vue-wechat-title’ Vue.use(VueWechatTitle) 3.ルーティングのプロファイルrouter.jsでは、目的のページタイトルを構成します.コードの例は次のとおりです.
routes:[{path:'/',name:'index',component:Index,meta:{title:'漫島-面白いサイト"},{path:'/recruit',name:'recruit',component:Recruit,meta:{title:'漫島-チームパートナー募集}]4.最後のステップはapp.vueにはコマンドv-wechat-titleを追加すればいいです.例は公式npmページcopyからです.注釈部分は使用規則を破壊しないように注意してください.具体的には以下の通りです.