vue.js router を 使い 動的に title や meta タグを変更

追記、

まとめ直した。

ちゃんと google chrome の console でタイトルタグを見ると変更されているので安心してね。

    //     //現在のURLを置き換える

        //現在の url に ユーザー名などを含めたい場合は、 replace 時に metaTitleとして渡しておく。

    //     this.$router.replace({
    //     path: location.pathname + "?page=" + e.data.current_page + "&y=" + window.scrollY + "&metaTitle=" + this.title,
    // });



createPageTitle : function(to){

            if(to.query.metaTitle){

                // タイトルを設定
                this.headTitle = to.query.metaTitle;
                var setTitle = to.meta.title + ' | ' + this.title;
                document.title = setTitle;


            } else {

                // タイトルを設定
                if(to.meta.title){

                    this.headTitle = to.meta.title;

                    var setTitle = to.meta.title + ' | ' + this.title;
                    document.title = setTitle;
                } else {
                    this.headTitle = '';
                    document.title = this.title;
                }


            }


            // メタタグdescription設定
            if(to.meta.desc){
                document.querySelector("meta[name='description']").setAttribute('content', to.meta.desc)
            } else {
                document.querySelector("meta[name='description']").setAttribute('content', this.desc)
            }
        },

以下の方法だと router.replace した場合にタイトルがうごかない。

https://qiita.com/livejam_db/items/a9d8a8cbead668bad18e
を試してみたが、ajaxを使うとうまく動かなかった。

基本的にページタイトルは固定。
ユーザー名位しかajaxで変更しないので、
routes にまとめておいて、axios使った場合のみ動的に変更すりゃええがね。

コピペじゃ動かないので参考にしてちょ。

先にmetaタグ用意しとくんだがね

vue.blade.php

<title>サンプルApp</title>
<meta name="description" content="説明">

app.jsは以下のようにするんだがね

app.js

//title と desc を設定しておく
var routes = [
    { path: '/', component: Top },
    { path: '/search', component: Search , meta: { title: 'ユーザー検索', desc : 'ユーザーを検索します。画面です'} },
    { path: '/profile', component: Profile , meta: { requiresAuth: true }},
];



//メイン
app = new Vue({
el: '#app',

data: {

    //初期 title と 初期 desc
    title: 'へるぴーはママの味',
    desc:'laravel5.7 と vue.js 2.x で作ったサンプルサイトです。',


//メソッド
methods: {

    createPageTitle : function(to){

        // タイトルを設定
        if(to.meta.title){
            var setTitle = to.meta.title + ' | ' + this.title;
            document.title = setTitle;
        } else {
            document.title = this.title;
        }

        // メタタグdescription設定
        if(to.meta.desc){
            document.querySelector("meta[name='description']").setAttribute('content', to.meta.desc)
        } else {
            document.querySelector("meta[name='description']").setAttribute('content', this.desc)
        }
},

watch: {
    //ページ移動するたびに　タイトルを整形していく
    '$route' (to, from) {
        this.createPageTitle(to);
},

AXIOSで 動的に変更するには。

hoge.vue

axios.post('/user/view/', dataform).then(e => {
    this.data = e.data;
    document.title = this.data.name + " さんのプロフィール | " + this.$root.title;//ユーザーネーム さんのプロフィール | へるぴーはママの味

    }).catch((error) => {
        // console.log("エラー");
    });