首頁  >  文章  >  web前端  >  在Vue中如何實現動態修改頁面title

在Vue中如何實現動態修改頁面title

亚连
亚连原創
2018-06-14 14:07:088032瀏覽

這篇文章主要介紹了基於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: &#39;history&#39;,
  routes:[
    {
    name: &#39;index&#39;,
    path: &#39;/&#39;,
    meta: {
        title: &#39;首页&#39;
     },
     component: index
    },
   {
     name: &#39;root&#39;,
     path: &#39;/root&#39;, 
     meta: {
        title: &#39;肉特&#39;
    },
    component: root
    }  
 ]
});
Vue.use(require(&#39;vue-wechat-title&#39;)); //实例化参数

在元件中頂部加入一段9ff3f908ea287cf095b9983c0efdc400</p&gt ;

上面是我整理給大家的,希望今後會對大家有幫助。

相關文章:

如何在wordpress中使用ajax

在vue中如何實作父元件傳遞資料

############ ##########在js中如何實作行動裝置手指滑動輪播圖######

以上是在Vue中如何實現動態修改頁面title的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn