<div>
<button class="top-right-button" @mouseenter="enter" @mouseleave="leave" :style="{ color: this.seen == true ? '#165df1' : 'black' }">
<i class="iconfont icon-yuyanqiehuan1 top-right-button-icon"></i>
{{ this.lang === true ? '简体中文' : 'English' }}
</button>
<div class="lang-drop-body" v-show="seen" @mouseenter="enter" @mouseleave="leave">
<div class="lang-drop-sss"></div>
<div class="lang-drop">
<ul>
<li>
<button class="lang-drop-cn" @click="setChinese()" :style="{ background: this.lang === true ? '#f7f8fc' : '' }">
简体中文
<i class="lang-drop-cn-gou" :style="{ display: this.lang === true ? 'block' : 'none' }">√</i>
</button>
</li>
<li>
<button class="lang-drop-cn" @click="setEnglish()" :style="{ background: this.lang === false ? '#f7f8fc' : '' }">
English
<i class="lang-drop-cn-gou" :style="{ display: this.lang === false ? 'block' : 'none' }">√</i>
</button>
</li>
</ul>
</div>
</div>
</div>
setLanguage() {
this.lang = !this.lang
this.language = this.lang == true ? 'CHNS' : 'ENG'
// 切换语言
this.$i18n.locale = this.language
},
setChinese() {
this.lang = true
this.language = 'CHNS'
this.$i18n.locale = this.language
},
setEnglish() {
this.lang = false
this.language = 'ENG'
this.$i18n.locale = this.language
},
你需要把当前选择语言用localStorage存储起来，切换的时候 进行修改
本地存储
问题标题: 页面语言切换的效果如何连通到其他页面
问题内容: 我在登录页面添加了语言切换功能，但是登录成功后，其他页面的语言切换效果与登录页面不一致。例如，在登录页面选择了英文模式，但成功登录后进入系统，系统页面仍然显示中文模式，无法实现语言切换数据的连接。请问如何解决这个问题？是否可以提供一些示例代码，以指导我如何实现这个功能？
提示1: 登录页面与其他页面之间的语言切换效果无法保持一致 提示2: 登录页面是纯前端实现的语言切换，代码大致如下
以下是更优化的问题：
问题标题: 登录页面与其他页面的语言切换效果不一致
问题内容: 我在登录页面实现了语言切换功能，但登录成功后，其他页面的语言显示与登录页面选择的语言不同步。请问如何解决这个问题？
提示1: 登录页面是通过纯前端实现语言切换功能的 提示2: 登录成功后，进入系统的页面仍然显示语言切换前的选项
请提供一些示例代码，以帮助我理解如何将登录页面的语言切换效果应用到其他页面上。谢谢！
解决这个问题的关键在于需要在登录页面选择语言后，将选择的语言信息传递给其他页面。我将提供一个示例代码，演示如何通过浏览器的localStorage对象实现这个功能。
首先，你需要在登录页面的语言切换功能中添加一个事件监听器，当选择了不同的语言后，将语言信息保存到localStorage中。以下是示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
</head>
<body>
<h1>Login Page</h1>
<select id="languageSelect">
<option value="en">English</option>
<option value="zh">中文</option>
</select>
<button id="loginButton">Login</button>
<script>
// 监听语言切换选择框的变化
var languageSelect = document.getElementById("languageSelect");
languageSelect.addEventListener("change", function(event) {
// 将选择的语言保存到localStorage中
localStorage.setItem("selectedLanguage", event.target.value);
});
// 登录按钮点击事件
var loginButton = document.getElementById("loginButton");
loginButton.addEventListener("click", function() {
// 跳转到其他页面
window.location.href = "system.html";
});
</script>
</body>
</html>
上述代码中，我们监听了语言选择框的变化事件，在选择变化时，将选择的语言保存到localStorage中。
接下来，我们在其他需要应用语言切换效果的页面中，通过读取localStorage中保存的语言信息来显示对应的语言。以下是示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>System Page</title>
</head>
<body>
<h1>System Page</h1>
<p id="languageDisplay"></p>
<script>
// 读取localStorage中保存的语言信息
var selectedLanguage = localStorage.getItem("selectedLanguage");
// 根据语言信息，显示对应的语言
var languageDisplay = document.getElementById("languageDisplay");
if (selectedLanguage === "en") {
languageDisplay.textContent = "English";
} else if (selectedLanguage === "zh") {
languageDisplay.textContent = "中文";
}
</script>
</body>
</html>
上述代码中，我们通过localStorage.getItem方法读取保存的语言信息，然后根据语言信息，显示对应的语言。
这样，当在登录页面选择了语言后，成功登录后跳转到系统页面时，系统页面会根据保存的语言信息显示对应的语言。
希望以上解决方案能够帮助到你。如果有任何疑问，请随时与我联系。