這篇文章主要介紹了基於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() } })
呼叫方法:e4e4f03220842766fe398e33aaff284b標題內容94b3e26ee717c64999d7867364b1b4a3
優點:這樣自訂程度較大(暫且不討論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')); //实例化参数
在元件中頂部加入一段9ff3f908ea287cf095b9983c0efdc400</p> ;
上面是我整理給大家的,希望今後會對大家有幫助。
相關文章:
############ ##########在js中如何實作行動裝置手指滑動輪播圖######以上是在Vue中如何實現動態修改頁面title的詳細內容。更多資訊請關注PHP中文網其他相關文章!