vue页面的title放到一个js文件里面配置的如何中英切换呢
要实现标题的中英切换,可以通过以下步骤操作:
-
创建一个配置文件,用于存放中英文标题的配置信息。例如,可以创建一个
titleConfig.js文件。 -
在
titleConfig.js文件中定义一个对象,包含中英文标题的键值对。例如:
const titleConfig = {
en: 'English Title',
zh: '中文标题'
};
export default titleConfig;
- 在需要使用标题的 Vue 组件中,引入
titleConfig.js文件,并添加一个计算属性,用于获取当前语言对应的标题。例如:
import titleConfig from '@/path/to/titleConfig.js';
export default {
computed: {
pageTitle() {
// 获取当前语言
const language = this.$store.state.language; // 假设语言存储在 Vuex 的 state 中
// 返回对应语言的标题
return titleConfig[language];
}
},
// ...
};
- 在组件的模板中,使用
pageTitle计算属性来显示标题。例如:
<template>
<div>
<h1>{{ pageTitle }}</h1>
<!-- 其他页面内容 -->
</div>
</template>
这样,在切换语言时,只需要修改 Vuex 中的语言状态,页面的标题就会自动更新为对应语言的标题
原文地址: http://www.cveoy.top/t/topic/hZMY 著作权归作者所有。请勿转载和采集!