多语言

src/components/main-header.vue

@@ -5,20 +5,25 @@
 			<div class="nav-item" v-for="item in navList" :key="item.name">
 				<down-menu :title="item.name" v-if="item.children">
 					<router-link :to="child.path" v-for="child in item.children" :key="child.path">
-						{{ child.name }}
+						{{ $t(child.name) }}
 					</router-link>
 				</down-menu>
 				<router-link class="link hover-bottom-animation" :to="item.path" v-else>
-					{{ item.name }}
+					{{ $t(item.name) }}
 					<span v-show="item.children" class="iconfont icon-arrow-down-bold"></span>
 				</router-link>
 			</div>
 		</div>
 		<div class="right">
-			<down-menu title="English">
-				<router-link class="link" to="/">English</router-link>
-				<router-link class="link" to="/zh-cn">简体中文</router-link>
-				<router-link class="link" to="/zh-tw">繁體中文</router-link>
+			<down-menu :title="langList.find((v) => v.value === locale)?.label || 'English'">
+				<router-link
+					class="link"
+					:to="`/${item.value}`"
+					v-for="item in langList"
+					:key="item.value"
+				>
+					{{ item.label }}
+				</router-link>
 			</down-menu>
 			<span class="">
 				<span class="iconfont icon-wode"></span>
@@ -28,16 +33,36 @@
 	</header>
 </template>
 <script setup lang="ts">
-	import { ref, onMounted, onUnmounted, computed } from 'vue'
+	import { ref, watch, computed } from 'vue'
 	import DownMenu from './down-menu.vue'
-
+	import { setLang, LangType } from '../lang'
+	import { useI18n } from 'vue-i18n'
+	const { locale } = useI18n()
 	import { useRoute } from 'vue-router'
 	const route = useRoute()
-	console.log(route)
+	const lang = computed(() => route.params.lang)
+	if (lang.value) setLang(lang.value)
+	watch(lang, (newVal) => {
+		setLang(newVal)
+	})
+	const langList = ref([
+		{
+			label: 'English',
+			value: LangType.en
+		},
+		{
+			label: '简体中文',
+			value: LangType.zhCn
+		},
+		{
+			label: '繁體中文',
+			value: LangType.zhTw
+		}
+	])
 
 	const navList = ref([
 		{
-			name: 'Home',
+			name: 'MainHeader.Home',
 			path: '/'
 		},
 		{