vue2.0 下對網頁標題(document.title)更新的一種實現思路

2017-05-22 更新：更優雅的實現方式 組件化的思想實現 vue2.0 下對網頁標題(document.title)的更新

在這個mvvm流行的今天，你們爲了體驗也是很拼的。

大部分mvvm都是單頁面應用，在路由切換時不像傳統頁面同樣從新下載整個html文件，這樣就沒法對頁面標題進行更新。形成整個應用內頁面標題和實際內容不相符，雖然說不影響使用，但強迫症患者仍是忍受不了。

由於用到vue-router以前一直想經過路由切換實現，可是搜索好久也沒找到合適的方法。

今天再次查看vue的文檔，忽然想到能夠經過自定義指令來實現。

具體思路以下，很簡單隻須要兩步就可實現：

1.首頁咱們註冊一個全局指令

Vue.directive('title', {
  inserted: function (el, binding) {
    document.title = el.innerText
    el.remove()
  }
})

2.在須要更改頁面標題的組件內調用咱們剛註冊的指令

<div v-title>標題內容</div>

噹噹噹，就這樣嘍。

這裏是用innerText來實現標題更新，若是你嫌棄這裏多了一個無用div，還能夠經過指令綁定值的方式實現

Vue.directive('title', {
  inserted: function (el, binding) {
    document.title = binding.value
  }
})

<div v-title="'標題內容'">
……組件內的內容
這裏的div能夠是你組件內的任何標籤
</div>

由於指令函數可以接受全部合法類型的 Javascript 表達式，因此這裏你要注意一下要對綁定的值加上引號。

什麼？不想多一個無用的div，又看不慣多出的引號，稍稍變通一下就能夠了

Vue.directive('title', {
  inserted: function (el, binding) {
    document.title = el.dataset.title
  }
})

<div v-title data-title="標題內容">
……組件內的內容
這裏的div能夠是你組件內的任何標籤
</div>