Vue.js 中使用 vue-i18n 实现基础 Title 中英文切换

"要实现在vue-i18n切换语言时，同时切换基础title，可以使用vue-i18n的全局切换语言事件以及Vue的computed属性来实现。\n\n首先，在你的基础title配置的js文件中，可以定义一个全局的title变量，并且将该变量导出：\n\njavascript\n// baseTitle.js\nexport let baseTitle = \"My App\";\n\n\n然后，在你的Vue页面中，引入该js文件，并且在Vue的computed属性中根据当前语言切换基础title：\n\njavascript\nimport { baseTitle } from './baseTitle.js';\n\nexport default {\n computed: {\n pageTitle() {\n return this.$t('page.title') + ' - ' + baseTitle;\n }\n }\n}\n\n\n在上面的代码中，我们将基础title与当前页面的title进行拼接，从而实现基础title的切换。\n\n最后，在模板中使用pageTitle来显示页面的title：\n\nhtml\n<template>\n <div>\n <h1>{{ pageTitle }}</h1>\n ...\n </div>\n</template>\n\n\n当使用vue-i18n切换语言时，会触发vue-i18n的全局切换语言事件，你可以监听该事件，在事件回调函数中重新计算pageTitle，从而实现基础title的切换。\n\njavascript\nimport { baseTitle } from './baseTitle.js';\n\nexport default {\n computed: {\n pageTitle() {\n return this.$t('page.title') + ' - ' + baseTitle;\n }\n },\n created() {\n this.$root.$on('languageChanged', this.updateTitle);\n },\n destroyed() {\n this.$root.$off('languageChanged', this.updateTitle);\n },\n methods: {\n updateTitle() {\n this.$forceUpdate();\n }\n }\n}\n\n\n在上面的代码中，我们使用this.$root.$on方法监听languageChanged事件，并在created钩子函数中注册事件回调函数updateTitle，在destroyed钩子函数中取消事件监听。在updateTitle方法中，通过调用this.$forceUpdate()来强制重新渲染页面，从而更新pageTitle。\n\n这样，当你使用vue-i18n切换语言时，updateTitle方法会被调用，pageTitle会被重新计算，基础title也会随之切换。