Vue 中 title 的动态修改

2023-09-03 14:48:04

在构建动态网站时，调整网页标题（title）是一个常见的需求。这不仅有助于优化搜索引擎排名（SEO），还可以提高用户体验，尤其是当内容随用户操作或页面导航发生变化时。本文将介绍几种在 Vue.js 项目中动态更改 title 的方法，并提供详细的操作步骤和代码示例。

使用 Vue Router 修改 Title

Vue Router 是一个用于构建单页应用的路由管理器。通过它可以在不同页面间切换时动态修改标题，增强 SEO 和用户体验。

实现步骤

在每个需要调整标题的组件中定义 metaInfo 属性。
配置 router/index.js，使路由能够响应页面变化并更新 title。

// router/index.js

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

const routes = [
  { path: '/', component: Home, meta: { title: '首页' } },
  { path: '/about', component: About, meta: { title: '关于我们' } }
]

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

在每个组件中添加 metaInfo：

// components/Home.vue

<template>
  <div>
    <!-- 页面内容 -->
  </div>
</template>

<script>
export default {
  name: "Home",
  metaInfo() {
    return {
      title: this.$route.meta.title
    }
  },
}
</script>

注意事项

确保每个路由配置了 meta 属性中的标题信息。
使用 vue-meta 插件可进一步增强对标题和其他元数据的管理。

利用 Vuex 实现全局控制

Vuex 是 Vue.js 的状态管理模式，适用于需要跨组件共享或响应式变化的状态。通过 Vuex 管理 title 可实现更灵活且统一的控制方式。

实现步骤

在 store 中添加 mutations 和 actions 以更新 state 中的标题。
使用 computed 属性或者 watch 监听标题的变化，并调用相关方法来修改页面 title。

// store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    pageTitle: ''
  },
  mutations: {
    SET_PAGE_TITLE(state, title) {
      state.pageTitle = title;
      document.title = title; // 直接修改页面标题
    }
  },
  actions: {
    changePageTitle({ commit }, title) {
      commit('SET_PAGE_TITLE', title);
    }
  }
})

在组件中使用：

// components/Contact.vue

<template>
  <div>
    <!-- 页面内容 -->
  </div>
</template>

<script>
import { mapActions } from 'vuex';

export default {
  name: "Contact",
  created() {
    this.changePageTitle('联系我们');
  },
  methods: {
    ...mapActions(['changePageTitle'])
  }
}
</script>

注意事项

Vuex 的使用有助于保持状态的集中化管理，但过度依赖可能会导致项目结构复杂。
使用 computed 属性或 watch 监听标题变化时，确保逻辑清晰，避免循环引用。

自定义 JavaScript 代码

对于一些简单的应用，直接在 Vue 组件中利用 mounted 和 beforeDestroy 生命周期钩子来修改 title 也是一种便捷的方法。

实现步骤

在组件的 mounted 钩子内设置标题。
在 beforeDestroy 中恢复或清除标题信息，确保不会影响到其他页面的标题显示。

// components/Services.vue

<template>
  <div>
    <!-- 页面内容 -->
  </div>
</template>

<script>
export default {
  name: "Services",
  data() {
    return {
      originalTitle: document.title // 记录原始标题以备恢复使用
    }
  },
  mounted() {
    this.changePageTitle('我们的服务');
  },
  beforeDestroy() {
    document.title = this.originalTitle; // 恢复标题
  },
  methods: {
    changePageTitle(newTitle) {
      document.title = newTitle;
    }
  }
}
</script>