動的にタイトルを変更。
ブラウザで見ても反映されない場合があるが、
chromeのコンソールで見れば反映されているので安心
app.js
var routes = [
{ path: '/hoge/', component: () => import('./components/Hoge.vue') , meta: {title: '美味しいよ'} },
];
const app = new Vue({
data () {
return {
title: 'へるぴーはママの味',
};
},
methods: {
//ページのタイトルを生成
//へるぴーはママの味 | 美味しいよ ができあがる
pageTitle(to){
if(to.query.metaTitle){
var setTitle = to.meta.title + ' | ' + this.title;
document.title = setTitle;
} else {
// タイトルを設定
if(to.meta.title){
var setTitle = to.meta.title + ' | ' + this.title;
document.title = setTitle;
} else {
document.title = this.title;
}
}
},
},
watch: {
//移動する度に動作させる
'$route'(to, from) {
this.pageTitle(to);
},
},
});
axiosで動的に変更したい
hoge.vue
axios.post('/article/view/').then(e => {
this.res = e.data.res;
document.title = this.res.name + " | " + this.$root.title;//ユーザーネーム さんのプロフィール | へるぴーはママの味
}