refactor: get page titles from i18n by route name

Author: cwandev

src/components/NavBar.vue

@@ -1,34 +1,50 @@
 <script setup lang="ts">
-import { routeWhiteList } from '@/config/routes'
+import { rootRouteList } from '@/config/routes'
 
 const route = useRoute()
 const router = useRouter()
-
-function onBack() {
-  if (window.history.state.back)
-    history.back()
-  else
-    router.replace('/')
-}
-
 const { t } = useI18n()
 
+/**
+ * Get page title
+ * Located in src/locales/json
+ */
 const title = computed(() => {
-  if (!route.meta)
-    return ''
+  if (route.name) {
+    return t(`navbar.${route.name}`)
+  }
 
-  return route.meta.i18n ? t(route.meta.i18n) : (route.meta.title || '')
+  return t('navbar.Undefined')
 })
 
-const showLeftArrow = computed(() => route.name && routeWhiteList.includes(route.name))
+/**
+ * Show the left arrow
+ * If route name is in rootRouteList, hide left arrow
+ */
+const showLeftArrow = computed(() => {
+  if (route.name && rootRouteList.includes(route.name)) {
+    return false
+  }
+
+  return true
+})
+
+function onBack() {
+  if (window.history.state.back) {
+    history.back()
+  }
+  else {
+    router.replace('/')
+  }
+}
 </script>
 
 <template>
   <VanNavBar
     :title="title"
     :fixed="true"
-    clickable placeholder
-    :left-arrow="!showLeftArrow"
+    :left-arrow="showLeftArrow"
+    placeholder clickable
     @click-left="onBack"
   />
 </template>

src/components/TabBar.vue

@@ -1,22 +1,27 @@
 <script setup lang="ts">
-import { routeWhiteList } from '@/config/routes'
+import { rootRouteList } from '@/config/routes'
 
 const active = ref(0)
 const route = useRoute()
 
-const show = computed(() => route.name && routeWhiteList.includes(route.name))
+const show = computed(() => {
+  if (route.name && rootRouteList.includes(route.name)) {
+    return true
+  }
+  return false
+})
 </script>
 
 <template>
   <van-tabbar v-if="show" v-model="active" route placeholder>
     <van-tabbar-item replace to="/">
-      {{ $t('layouts.home') }}
+      {{ $t('tabbar.home') }}
       <template #icon>
         <div class="i-carbon:home" />
       </template>
     </van-tabbar-item>
     <van-tabbar-item replace to="/profile">
-      {{ $t('layouts.profile') }}
+      {{ $t('tabbar.profile') }}
       <template #icon>
         <div class="i-carbon:user" />
       </template>

src/config/routes.ts

@@ -1,5 +1,9 @@
-// 定义导航栏和标签栏可见的路由白名单
-export const routeWhiteList: readonly string[] = [
-  'home', // 首页
-  'profile', // 个人中心
+/**
+ * List of root-level route names.
+ * In the Navbar component, the left arrow is hidden for these routes.
+ * However, the Tabbar is shown on these routes.
+ */
+export const rootRouteList: readonly string[] = [
+  'Home',
+  'Profile',
 ]

src/locales/en-US.json

@@ -1,29 +1,46 @@
 {
-  "menus": {
-    "home": "Home",
-    "profile": "My Center",
+  "navbar": {
+    "Home": "Home",
+    "Profile": "Profile",
+    "Mock": "🗂️ Mock",
+    "Charts": "📊 Charts",
+    "UnoCSS": "⚡ UnoCSS",
+    "Counter": "🍍 Persistent State",
+    "KeepAlive": "♻️ Page Cache",
+    "ScrollCache": "📍 Scroll Cache",
+    "Login": "🧑‍💻 Login",
+    "Register": "🧑‍💻 Register",
+    "ForgotPassword": "❓ Forgot Password",
+    "Settings": "⚙️ Settings",
+    "404": "⚠️ Page 404",
+    "Undefined": "🤷 Undefined title"
+  },
+
+  "tabbar": {
+    "home": "HOME",
+    "profile": "PROFILE"
+  },
+
+  "home": {
     "darkMode": "🌗 Dark Mode",
-    "mockGuide": "💿 Mock Guide",
     "language": "📚 Language",
-    "404Demo": "🙅 Page 404 Demo",
-    "echartsDemo": "📊 Echarts Demo",
-    "persistPiniaState": "🍍 Persistent Pinia state",
-    "unocssExample": "🎨 Unocss example",
-    "keepAlive": "🧡 KeepAlive Demo",
-    "scrollCache": "📜 Scroll Cache Demo",
-    "login": "🔒 Login",
-    "register": "Register",
     "settings": "Settings",
-    "basicSettings": "Basic Settings",
-    "exampleComponents": "Example components",
-    "forgot-password": "Forgot Password"
+    "examples": "Examples"
   },
+
+  "profile": {
+    "login": "Login",
+    "settings": "Settings",
+    "docs": "Docs"
+  },
+
   "mock": {
     "fromAsyncData": "Data from asynchronous requests",
     "noData": "No data",
     "pull": "Pull",
     "reset": "Reset"
   },
+
   "charts": {
     "January": "Jan",
     "February": "Feb",
@@ -32,39 +49,44 @@
     "May": "May",
     "June": "Jun"
   },
-  "layouts": {
-    "home": "HOME",
-    "profile": "PROFILE"
+
+  "counter": {
+    "description": "This counter's state is persisted via Pinia. Try refreshing the page to see it in action."
   },
-  "profile": {
-    "login": "Login",
-    "settings": "Settings",
-    "docs": "Docs"
+
+  "unocss": {
+    "title": "Hello, Unocss!",
+    "description": "This is a simple example of Unocss in action.",
+    "button": "Button"
   },
+
   "keepAlive": {
     "label": "The current component will be cached"
   },
+
   "scrollCache": {
     "sectionTitle": "Section title",
     "sectionText": "Section text text text text text text text text text text",
     "finished": "Already at the bottom ~",
     "loading": "Loading..."
   },
+
   "login": {
     "login": "Sign In",
     "logout": "Sign Out",
     "email": "Email",
     "password": "Password",
     "pleaseEnterEmail": "Please enter email",
     "pleaseEnterPassword": "Please enter password",
-    "sign-up": "Click to sign up",
-    "forgot-password": "Forgot password?"
+    "signUp": "Click to sign up",
+    "forgotPassword": "Forgot password?"
   },
-  "forgot-password": {
+
+  "forgotPassword": {
     "email": "Email",
     "code": "Code",
     "password": "Password",
-    "comfirmPassword": "Password again",
+    "confirmPassword": "Password again",
     "pleaseEnterEmail": "Please enter email",
     "pleaseEnterCode": "Please enter code",
     "pleaseEnterPassword": "Please enter password",
@@ -77,12 +99,13 @@
     "sendCodeSuccess": "Sent, the code is",
     "passwordResetSuccess": "Password reset succeeded"
   },
+
   "register": {
     "email": "Email",
     "code": "Code",
     "nickname": "Nickname",
     "password": "Password",
-    "comfirmPassword": "Password again",
+    "confirmPassword": "Password again",
     "pleaseEnterEmail": "Please enter email",
     "pleaseEnterCode": "Please enter code",
     "pleaseEnterNickname": "Please enter nickname",
@@ -96,9 +119,10 @@
     "sendCodeSuccess": "Sent, the code is",
     "registerSuccess": "Register succeeded"
   },
+
   "settings": {
     "logout": "Sign Out",
     "currentVersion": "Current Version",
-    "comfirmTitle": "Confirm Exit?"
+    "confirmTitle": "Confirm Exit?"
   }
 }