vuejs如何動態改變title

# Vue.js如何動態改變title

在單頁應用(SPA)開發中，動態修改頁面標題(title)是常見的需求。Vue.js提供了多種方式實現這一功能，本文將介紹4種主流方法。

## 1. 使用document.title直接修改

最簡單直接的方式是通過原生JS修改：

```javascript
// 在methods或生命周期鉤子中
changeTitle() {
  document.title = '新標題';
}

優點：簡單直接，無需額外依賴
缺點：無法與Vue響應式系統集成

2. 結合watch監聽路由變化

配合vue-router使用時，可以通過watch監聽路由變化：

// router.js
const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    meta: { title: '控制面板' }
  }
]

// main.js
router.afterEach((to) => {
  document.title = to.meta.title || '默認標題'
})

3. 使用vue-meta插件

vue-meta是專門管理元信息的官方推薦庫：

// 安裝
npm install vue-meta

// 使用
import VueMeta from 'vue-meta'
Vue.use(VueMeta)

// 組件內
export default {
  metaInfo: {
    title: '動態標題'
  }
}

特點： - 支持SSR - 嵌套路由自動合并meta - 提供豐富的生命周期鉤子

4. 自定義指令實現

創建全局指令實現標題綁定：

// main.js
Vue.directive('title', {
  inserted(el, binding) {
    document.title = binding.value
  },
  update(el, binding) {
    document.title = binding.value
  }
})

// 使用方式
<div v-title="currentTitle"></div>

最佳實踐建議

1. 路由級標題：使用vue-router的導航守衛
2. 組件級標題：推薦vue-meta
3. SEO需求：確保服務端渲染(SSR)也能正確設置
4. 標題模板：可統一處理前綴/后綴

// 標題模板示例
const titleTemplate = (title) => `${title} | 我的網站`

注意事項

• 動態標題可能影響SEO，建議配合預渲染
• 在beforeDestroy鉤子中恢復默認標題
• 移動端WebView可能需要特殊處理

通過以上方法，可以靈活實現各種動態標題需求，根據項目復雜度選擇最適合的方案。 “`