這篇文章主要介紹了基於Vue的SPA動態修改頁面title的方法,需要的朋友可以參考下
最近基於VUE做個SPA手機端web發現動態修改頁面標題通過 document.title=xxxx 來修改著實蛋疼，而且在IOS的微信端據說沒效果。百度發現要針對IOS的微信做點額外的操作，即：創建一個隱藏的Iframe，然後隨便加載一個圖片文件，然後加載完成移除，這樣就能修改頁面title了。網路上有幾種方案：
1，App.Vue裡面設定title屬性，然後頁面title去綁定，所有子元件修改標題就透過 this.$root.data.title=xxxxx;去修改
缺點：App.Vue預設的el只是body的一個p，這樣乾需要綁定整個html
2，透過自訂指令實作
Vue.directive('title', {
inserted: function (el, binding) {
document.title = el.innerText
el.remove()
}
})呼叫方法：<p v-title>標題內容</p>
優點：這樣自訂程度較大（暫且不討論IOS微信端是否能修改成功)
缺點：無法滿足某些JS方法中修改頁面標題的需求，例如頁面為一個websocket的頁面，收到訊息要動態顯示頁面標題這時候頻繁去修改p綁定的text並不恰當
針對網路上查到的上面兩種方法，我進行了合併，利用vue的插件實作SPA的頁面標題修改：
var plugin={};
plugin.install=function(Vue,options){
Vue.prototype.$title=function(title){
document.title=title;
var iframe=document.createElement("iframe");
iframe.style.display='none';
iframe.setAttribute('src','/e.png');
var loadedCallback=()=>{
iframe.removeEventListener('load',loadedCallback);
document.body.removeChild(iframe);
};
iframe.addEventListener('load',loadedCallback);
document.body.appendChild(iframe);
};
};
module.exports=plugin;呼叫方法： this.$title ('xxxxxx'); 當然你可以替換為綁定的變量，然後watch進行即時調整。
ps：Vue Spa切換頁面時更改標題
在Vue元件化開發過程中，因為是單頁開發，但有時需要頁面的title根據情況改變，於是上網查了一下，各種說法花(wo)裡(kan)胡(bu)哨(dong)， 於是想到一個黑科技documet.title="xxx";
隨便創建一個項目，在獨立的模組中，created在鉤子函數啟動之後document.title='標題'; 但是據說在IOS的微信下是無效的，雖然用蘋果機測試過有用，但是想到這樣會影響我的代碼潔癖。
<script>
export default {
data(){
return{
}
},
created(){
document.title="首页"
},
}
</script>於是在github上找到一個好用的東西vue-wechat-title
透過npm install vue-wechat-title 安裝
#引入需要的vue-router與頁面需要的元件之後
const router = new VueRouter({
mode: 'history',
routes:[
{
name: 'index',
path: '/',
meta: {
title: '首页'
},
component: index
},
{
name: 'root',
path: '/root',
meta: {
title: '肉特'
},
component: root
}
]
});
Vue.use(require('vue-wechat-title')); //实例化参数在元件中頂部加入一段<p v-wechat-title="$route.meta.title"></p> ;
上面是我整理給大家的，希望今後會對大家有幫助。
相關文章：
############ ##########在js中如何實作行動裝置手指滑動輪播圖######以上是在Vue中如何實現動態修改頁面title的詳細內容。更多資訊請關注PHP中文網其他相關文章！
