Vue 中 title 的動態修改

使用document.title方法通過 dom 操作來修改 title 的值

路由傳遞的方法，即通過路由跳轉傳參傳遞 title 的值。由於業務邏輯中本身就包含大量的路由傳參，為了解耦方便後續維護，推薦將 title 的值通過路由配置中的 meta 進行傳遞。

之後，通過訪問當前路由物件（$route）的 meta 屬性即可獲取到 title 值。

// router.js
const routes = [
}, }]

// 業務模組，獲取 title
...beforecreate () 
...

通過上面的兩種方法，可以順利傳遞 title 的值。

完成了 title 值的傳遞，接下來我們談談何時該修改 title。

想到這個問題，大多數人第乙個想到的應該就是在生命週期鉤子中修改 title。

生命週期鉤子

一般情況下，我們在mounted生命週期鉤子中進行初始化請求，所以慣性思維之下，我在 mounted 中進行了 title 的修改。

// 業務**
mounted ()

結果，效果不佳，標籤頁的 title 延遲 1 秒以上才成功修改。我們可以在beforecreate鉤子中就可以進行 title 的修改。

改動後的**如下：

// 業務**
beforecreate ()

可以發現，修改後的**效果明顯好了許多，延遲感雖然還有，但是已經不太明顯。

路由守衛

比起在生命週期鉤子中修改 title 值，在路由跳轉時利用路由守衛完成 title 的修改，豈不美哉？畢竟路由跳**生在生命週期函式執行之前，使用路由守衛修改 title 值可以明顯降低 title 修改的延時。

// router.js
router.beforeeach((to, from, next) => )

此時，我們基本完美完成了功能需求，但是，還是有一點小瑕疵——如果 meta 中沒有定義 title 值，此時 title 值就變成了 undefined，所以，我們需要設定預設的 title 值（一般可以是該項目的名稱）。修改後的**如下：

// router.js
const defaulttitle = '預設 title'
router.beforeeach((to, from, next) => )

到這裡為止，我們完美實現了需求，並且實現了該功能與業務**的解耦。