Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 1461866

Browse files
committed
refactor: get page titles from i18n by route name
1 parent b6dd3a2 commit 1461866

File tree

21 files changed

+234
-228
lines changed

21 files changed

+234
-228
lines changed

‎src/components/NavBar.vue‎

Lines changed: 31 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,50 @@
11
<script setup lang="ts">
2-
import { routeWhiteList } from '@/config/routes'
2+
import { rootRouteList } from '@/config/routes'
33
44
const route = useRoute()
55
const router = useRouter()
6-
7-
function onBack() {
8-
if (window.history.state.back)
9-
history.back()
10-
else
11-
router.replace('/')
12-
}
13-
146
const { t } = useI18n()
157
8+
/**
9+
* Get page title
10+
* Located in src/locales/json
11+
*/
1612
const title = computed(() => {
17-
if (!route.meta)
18-
return ''
13+
if (route.name) {
14+
return t(`navbar.${route.name}`)
15+
}
1916
20-
return route.meta.i18n?t(route.meta.i18n) : (route.meta.title||'')
17+
return t('navbar.Undefined')
2118
})
2219
23-
const showLeftArrow = computed(() => route.name && routeWhiteList.includes(route.name))
20+
/**
21+
* Show the left arrow
22+
* If route name is in rootRouteList, hide left arrow
23+
*/
24+
const showLeftArrow = computed(() => {
25+
if (route.name && rootRouteList.includes(route.name)) {
26+
return false
27+
}
28+
29+
return true
30+
})
31+
32+
function onBack() {
33+
if (window.history.state.back) {
34+
history.back()
35+
}
36+
else {
37+
router.replace('/')
38+
}
39+
}
2440
</script>
2541

2642
<template>
2743
<VanNavBar
2844
:title="title"
2945
:fixed="true"
30-
clickableplaceholder
31-
:left-arrow="!showLeftArrow"
46+
:left-arrow="showLeftArrow"
47+
placeholderclickable
3248
@click-left="onBack"
3349
/>
3450
</template>

‎src/components/TabBar.vue‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,27 @@
11
<script setup lang="ts">
2-
import { routeWhiteList } from '@/config/routes'
2+
import { rootRouteList } from '@/config/routes'
33
44
const active = ref(0)
55
const route = useRoute()
66
7-
const show = computed(() => route.name && routeWhiteList.includes(route.name))
7+
const show = computed(() => {
8+
if (route.name && rootRouteList.includes(route.name)) {
9+
return true
10+
}
11+
return false
12+
})
813
</script>
914

1015
<template>
1116
<van-tabbar v-if="show" v-model="active" route placeholder>
1217
<van-tabbar-item replace to="/">
13-
{{ $t('layouts.home') }}
18+
{{ $t('tabbar.home') }}
1419
<template #icon>
1520
<div class="i-carbon:home" />
1621
</template>
1722
</van-tabbar-item>
1823
<van-tabbar-item replace to="/profile">
19-
{{ $t('layouts.profile') }}
24+
{{ $t('tabbar.profile') }}
2025
<template #icon>
2126
<div class="i-carbon:user" />
2227
</template>

‎src/config/routes.ts‎

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

‎src/locales/en-US.json‎

Lines changed: 52 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,46 @@
11
{
2-
"menus": {
3-
"home": "Home",
4-
"profile": "My Center",
2+
"navbar": {
3+
"Home": "Home",
4+
"Profile": "Profile",
5+
"Mock": "🗂️ Mock",
6+
"Charts": "📊 Charts",
7+
"UnoCSS": "⚡ UnoCSS",
8+
"Counter": "🍍 Persistent State",
9+
"KeepAlive": "♻️ Page Cache",
10+
"ScrollCache": "📍 Scroll Cache",
11+
"Login": "🧑‍💻 Login",
12+
"Register": "🧑‍💻 Register",
13+
"ForgotPassword": "❓ Forgot Password",
14+
"Settings": "⚙️ Settings",
15+
"404": "⚠️ Page 404",
16+
"Undefined": "🤷 Undefined title"
17+
},
18+
19+
"tabbar": {
20+
"home": "HOME",
21+
"profile": "PROFILE"
22+
},
23+
24+
"home": {
525
"darkMode": "🌗 Dark Mode",
6-
"mockGuide": "💿 Mock Guide",
726
"language": "📚 Language",
8-
"404Demo": "🙅 Page 404 Demo",
9-
"echartsDemo": "📊 Echarts Demo",
10-
"persistPiniaState": "🍍 Persistent Pinia state",
11-
"unocssExample": "🎨 Unocss example",
12-
"keepAlive": "🧡 KeepAlive Demo",
13-
"scrollCache": "📜 Scroll Cache Demo",
14-
"login": "🔒 Login",
15-
"register": "Register",
1627
"settings": "Settings",
17-
"basicSettings": "Basic Settings",
18-
"exampleComponents": "Example components",
19-
"forgot-password": "Forgot Password"
28+
"examples": "Examples"
2029
},
30+
31+
"profile": {
32+
"login": "Login",
33+
"settings": "Settings",
34+
"docs": "Docs"
35+
},
36+
2137
"mock": {
2238
"fromAsyncData": "Data from asynchronous requests",
2339
"noData": "No data",
2440
"pull": "Pull",
2541
"reset": "Reset"
2642
},
43+
2744
"charts": {
2845
"January": "Jan",
2946
"February": "Feb",
@@ -32,39 +49,44 @@
3249
"May": "May",
3350
"June": "Jun"
3451
},
35-
"layouts": {
36-
"home": "HOME",
37-
"profile": "PROFILE"
52+
53+
"counter": {
54+
"description": "This counter's state is persisted via Pinia. Try refreshing the page to see it in action."
3855
},
39-
"profile": {
40-
"login": "Login",
41-
"settings": "Settings",
42-
"docs": "Docs"
56+
57+
"unocss": {
58+
"title": "Hello, Unocss!",
59+
"description": "This is a simple example of Unocss in action.",
60+
"button": "Button"
4361
},
62+
4463
"keepAlive": {
4564
"label": "The current component will be cached"
4665
},
66+
4767
"scrollCache": {
4868
"sectionTitle": "Section title",
4969
"sectionText": "Section text text text text text text text text text text",
5070
"finished": "Already at the bottom ~",
5171
"loading": "Loading..."
5272
},
73+
5374
"login": {
5475
"login": "Sign In",
5576
"logout": "Sign Out",
5677
"email": "Email",
5778
"password": "Password",
5879
"pleaseEnterEmail": "Please enter email",
5980
"pleaseEnterPassword": "Please enter password",
60-
"sign-up": "Click to sign up",
61-
"forgot-password": "Forgot password?"
81+
"signUp": "Click to sign up",
82+
"forgotPassword": "Forgot password?"
6283
},
63-
"forgot-password": {
84+
85+
"forgotPassword": {
6486
"email": "Email",
6587
"code": "Code",
6688
"password": "Password",
67-
"comfirmPassword": "Password again",
89+
"confirmPassword": "Password again",
6890
"pleaseEnterEmail": "Please enter email",
6991
"pleaseEnterCode": "Please enter code",
7092
"pleaseEnterPassword": "Please enter password",
@@ -77,12 +99,13 @@
7799
"sendCodeSuccess": "Sent, the code is",
78100
"passwordResetSuccess": "Password reset succeeded"
79101
},
102+
80103
"register": {
81104
"email": "Email",
82105
"code": "Code",
83106
"nickname": "Nickname",
84107
"password": "Password",
85-
"comfirmPassword": "Password again",
108+
"confirmPassword": "Password again",
86109
"pleaseEnterEmail": "Please enter email",
87110
"pleaseEnterCode": "Please enter code",
88111
"pleaseEnterNickname": "Please enter nickname",
@@ -96,9 +119,10 @@
96119
"sendCodeSuccess": "Sent, the code is",
97120
"registerSuccess": "Register succeeded"
98121
},
122+
99123
"settings": {
100124
"logout": "Sign Out",
101125
"currentVersion": "Current Version",
102-
"comfirmTitle": "Confirm Exit?"
126+
"confirmTitle": "Confirm Exit?"
103127
}
104128
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /