refactor: move page titles to i18n files

cwandev · cwandev · commit c2b4e67d5761 · 2025-07-19T22:24:22.000+08:00
diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
@@ -13,20 +13,38 @@ function onBack() {
 
 const { t } = useI18n()
 
+/**
+ * Get page title
+ * Located in i18n/locales/json
+ */
 const title = computed(() => {
-  if (!route.meta)
-    return ''
-  return route.meta.i18n_key ? t(route.meta.i18n_key) : (route.meta.title || '')
+  if (route.name) {
+    return t(`navbar.${route.name}`)
+  }
+
+  return t('navbar.Undefined')
 })
 
-const showLeftArrow = computed(() => route.name && routeWhiteList.includes(route.name))
+/**
+ * Display the left arrow
+ * If route name is in route white list, display left arrow
+ */
+const showLeftArrow = computed(() => {
+  if (route.name && routeWhiteList.includes(route.name)) {
+    return true
+  }
+
+  return false
+})
 </script>
 
 <template>
-  <VanNavBar
+  <van-nav-bar
     :title="title"
+    clickable
+    placeholder
+    fixed
     :left-arrow="!showLeftArrow"
-    clickable placeholder fixed
     @click-left="onBack"
   />
 </template>
diff --git a/app/config/index.ts b/app/config/index.ts
@@ -3,4 +3,4 @@ import type { RouteRecordName } from 'vue-router'
 /**
  * Use the AppFooter routing whitelist
  */
-export const useAppFooterRouteNames: RouteRecordName[] = ['index', 'profile']
+export const useAppFooterRouteNames: RouteRecordName[] = ['Home', 'Profile']
diff --git a/app/pages/counter/index.vue b/app/pages/counter/index.vue
@@ -2,8 +2,7 @@
 import useCounter from '~/composables/counter'
 
 definePageMeta({
-  title: '🍍 持久化 Pinia 状态',
-  i18n_key: 'menu.persistPiniaState',
+  name: 'Counter',
 })
 
 const counter = useCounter()
diff --git a/app/pages/index.vue b/app/pages/index.vue
@@ -6,8 +6,7 @@ import { Locale } from 'vant'
 
 definePageMeta({
   layout: 'default',
-  title: '主页',
-  i18n_key: 'menu.home',
+  name: 'Home',
 })
 
 const color = useColorMode()
diff --git a/app/pages/keepalive/index.vue b/app/pages/keepalive/index.vue
@@ -6,8 +6,6 @@ defineOptions({
 definePageMeta({
   name: 'Keepalive',
   keepalive: true,
-  title: '🧡 KeepAlive',
-  i18n_key: 'menu.keepAlive',
 })
 
 const value = ref(1)
diff --git a/app/pages/profile/index.vue b/app/pages/profile/index.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 definePageMeta({
   layout: 'default',
-  title: '我的',
-  i18n_key: 'menu.profile',
+  name: 'Profile',
 })
 </script>
 
diff --git a/app/pages/prose/index.vue b/app/pages/prose/index.vue
@@ -3,8 +3,7 @@ import { useProseStore } from '~/stores/prose'
 
 definePageMeta({
   layout: 'default',
-  title: '随笔',
-  i18n_key: 'menu.fetch',
+  name: 'Prose',
 })
 
 const proseStore = useProseStore()
diff --git a/app/pages/unocss/index.vue b/app/pages/unocss/index.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 definePageMeta({
-  title: '🎨 Unocss 示例',
-  i18n_key: 'menu.unocssExample',
+  name: 'Unocss',
 })
 </script>
 
diff --git a/app/types/vue-router.d.ts b/app/types/vue-router.d.ts
@@ -2,8 +2,6 @@ declare module 'vue-router' {
   interface RouteMeta {
     /** page title */
     title?: string
-    /** i18n key */
-    i18n_key?: string
   }
 }
 
diff --git a/i18n/locales/en-US.json b/i18n/locales/en-US.json
@@ -1,7 +1,20 @@
 {
-  "menu": {
+  "navbar": {
+    "Home": "Home",
+    "Counter": "Persist Pinia State",
+    "Profile": "Profile",
+    "Prose": "Network Request",
+    "Unocss": "Unocss Example",
+    "Keepalive": "KeepAlive Demo",
+    "Undefined": "Undefined title"
+  },
+
+  "tabbar": {
     "home": "Home",
-    "profile": "Profile",
+    "profile": "Profile"
+  },
+
+  "menu": {
     "darkMode": "🌗 Dark Mode",
     "language": "📚 Language",
     "404Demo": "🙅 Page 404 Demo",
@@ -10,30 +23,32 @@
     "persistPiniaState": "💾 Persist Pinia State",
     "fetch": "🏄 Network Request"
   },
-  "tabbar": {
-    "home": "Home",
-    "profile": "Profile"
-  },
+
   "unocss_page": {
     "hello": "Hello {0}",
     "desc": "This is a simple example of Unocss in action.",
     "btn_txt": "Button"
   },
+
   "error_page": {
     "back_btn": "Back",
     "txt": "Not found"
   },
+
   "profile_page": {
     "txt": "WIP"
   },
+
   "keepalive_page": {
     "label": "The current component will be cached"
   },
+
   "counter_page": {
     "label": "This is a simple example of persisting Pinia state. To verify its effectiveness, you can refresh the interface and observe it.",
     "label_num": "Number",
     "btn_add": "Add"
   },
+
   "prose_page": {
     "btn_fetch": "Fetch",
     "btn_clear": "Clear",
diff --git a/i18n/locales/zh-CN.json b/i18n/locales/zh-CN.json
@@ -1,7 +1,20 @@
 {
-  "menu": {
+  "navbar": {
+    "Home": "主页",
+    "Counter": "持久化 Pinia 状态",
+    "Profile": "我的",
+    "Prose": "网络请求",
+    "Unocss": "Unocss 示例",
+    "Keepalive": "KeepAlive 演示",
+    "Undefined": "未定义标题"
+  },
+
+  "tabbar": {
     "home": "主页",
-    "profile": "我的",
+    "profile": "我的"
+  },
+
+  "menu": {
     "darkMode": "🌗 暗黑模式",
     "language": "📚 语言",
     "404Demo": "🙅 404页 演示",
@@ -10,30 +23,32 @@
     "persistPiniaState": "💾 持久化 Pinia 状态",
     "fetch": "🏄 网络请求"
   },
-  "tabbar": {
-    "home": "主页",
-    "profile": "我的"
-  },
+
   "unocss_page": {
     "hello": "你好 {0}",
     "desc": "这是 unocss 一个简单例子。",
     "btn_txt": "按钮"
   },
+
   "error_page": {
     "back_btn": "返回",
     "txt": "没有找到"
   },
+
   "profile_page": {
     "txt": "未完成"
   },
+
   "keepalive_page": {
     "label": "当前组件将会被缓存"
   },
+
   "counter_page": {
     "label": "这是一个简单的持久化 Pinia 状态的例子。为了验证其有效性，你可以刷新界面并观察它。",
     "label_num": "数字",
     "btn_add": "增加"
   },
+
   "prose_page": {
     "btn_fetch": "拉取",
     "btn_clear": "清空",
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -97,6 +97,8 @@ export default defineNuxtConfig({
       include: [
         '@intlify/core-base',
         '@intlify/shared',
+        '@vue/devtools-core',
+        '@vue/devtools-kit',
       ],
     },
   },

Original file line number	Diff line number	Diff line change
`@@ -2,8 +2,6 @@ declare module 'vue-router' {`
`2`	`2`	`interface RouteMeta {`
`3`	`3`	`/** page title */`
`4`	`4`	`title?: string`
`5`		`- /** i18n key */`
`6`		`- i18n_key?: string`
`7`	`5`	`}`
`8`	`6`	`}`
`9`	`7`