Vue 页面标题中英切换配置方法 | 使用 JavaScript 文件管理标题 | SEO 优化

要实现标题的中英切换，可以通过以下步骤操作：\n\n1. 创建一个配置文件，用于存放中英文标题的配置信息。例如，可以创建一个 titleConfig.js 文件。\n\n2. 在 titleConfig.js 文件中定义一个对象，包含中英文标题的键值对。例如：\n\njavascript\nconst titleConfig = {\n en: 'English Title',\n zh: '中文标题'\n};\n\nexport default titleConfig;\n\n\n3. 在需要使用标题的 Vue 组件中，引入 titleConfig.js 文件，并添加一个计算属性，用于获取当前语言对应的标题。例如：\n\njavascript\nimport titleConfig from '@/path/to/titleConfig.js';\n\nexport default {\n computed: {\n pageTitle() {\n // 获取当前语言\n const language = this.$store.state.language; // 假设语言存储在 Vuex 的 state 中\n\n // 返回对应语言的标题\n return titleConfig[language];\n }\n },\n // ...\n};\n\n\n4. 在组件的模板中，使用 pageTitle 计算属性来显示标题。例如：\n\nhtml\n<template>\n <div>\n <h1>{{ pageTitle }}</h1>\n <!-- 其他页面内容 -->\n </div>\n</template>\n\n\n这样，在切换语言时，只需要修改 Vuex 中的语言状态，页面的标题就会自动更新为对应语言的标题。