feat: add dynamic routing and enhance button labels in localization

Author: kieranwv

package.json

@@ -26,6 +26,7 @@
   },
   "dependencies": {
     "@iconify-json/carbon": "^1.2.4",
+    "@iconify-json/logos": "^1.2.3",
     "@unhead/vue": "^1.11.14",
     "@unocss/reset": "^0.58.9",
     "@vueuse/core": "^10.11.1",

pnpm-lock.yaml

@@ -3,16 +3,8 @@ const { t } = useI18n()
 
 const { toggleLocale } = useLocale()
 
-const route = useRoute()
-
-const router = useRouter()
-
 const { headerLogo } = storeToRefs(useLayoutStore())
 
-function goPage(path: string) {
-  router.push(path)
-}
-
 function openGithub() {
   window.open(GITHUB_URL)
 }
@@ -27,15 +19,6 @@ function openGithub() {
         <sup><i>v{{ APP_VERSION }}</i></sup>
       </h1>
       <div flex="~ wrap gap-2 justify-center">
-        <TheButton v-if="route.path === '/about'" @click="goPage('/')">
-          {{ t('button.index-page') }}
-        </TheButton>
-        <TheButton v-else @click="goPage('/about')">
-          {{ t('button.about-page') }}
-        </TheButton>
-        <TheButton @click="goPage('/404')">
-          {{ t('button.404-page') }}
-        </TheButton>
         <TheButton @click="toggleLocale()">
           <i i-carbon-ibm-watson-language-translator />
         </TheButton>

src/layouts/page.vue

@@ -17,13 +17,15 @@
   },
   "button": {
     "back": "Back",
-    "index-page": "Index",
-    "about-page": "About",
-    "404-page": "404",
+    "index-page": "Index Page",
+    "about-page": "About Page",
+    "404-page": "404 Page",
     "show-logo": "Show Logo",
     "hide-logo": "Hide Logo",
-    "toggle-logo-description": "Toggle the visibility of the logo",
-    "request": "Request"
+    "toggle-logo-description": "State management based on Pinia",
+    "axios-request": "Request with Axios",
+    "dynamic-route": "Dynamic Route",
+    "dynamic-route-description": "File-based dynamic routing"
   },
   "empty": "No content"
 }

src/locales/en.json

@@ -19,12 +19,14 @@
   "button": {
     "back": "返回",
     "index-page": "首页",
-    "about-page": "关于",
-    "404-page": "404",
+    "about-page": "关于页面",
+    "404-page": "404 页面",
     "show-logo": "显示 Logo",
     "hide-logo": "隐藏 Logo",
-    "toggle-logo-description": "切换 Logo 的可见性",
-    "request": "网络请求"
+    "toggle-logo-description": "基于 Pinia 的状态管理",
+    "axios-request": "使用 Axios 发起请求",
+    "dynamic-route": "动态路由",
+    "dynamic-route-description": "基于文件的动态路由"
   },
   "empty": "暂无内容"
 }

src/locales/zh.json

@@ -0,0 +1,34 @@
+<route lang="json">
+{
+  "name": "dynamic",
+  "meta": {
+    "layout": "page"
+  }
+}
+</route>
+
+<script lang="ts" setup>
+const route = useRoute()
+
+const title = computed(() => {
+  return route.params.id
+})
+
+useHead({
+  title,
+})
+</script>
+
+<template>
+  <TheCard>
+    <h2 text-center text-lg font-bold mb-5>
+      Hi, {{ route.params.id }}
+    </h2>
+    <p>
+      Read more about dynamic routing in the
+      <a target="_blank" href="https://uvr.esm.is/guide/file-based-routing.html#dynamic-routes">
+        https://uvr.esm.is/guide/file-based-routing.html#dynamic-routes
+      </a>
+    </p>
+  </TheCard>
+</template>

src/pages/dynamic/[id].vue

@@ -10,6 +10,8 @@
 <script lang="ts" setup>
 import type { TodoList } from '@/types/todo'
 
+const router = useRouter()
+
 const { t } = useI18n()
 
 const title = computed(() => {
@@ -42,20 +44,48 @@ function fetchData() {
     loading.value = false
   })
 }
+
+function goPage(path: string) {
+  router.push(path)
+}
+
+function goDynamicRoute() {
+  goPage(`/dynamic/${Math.random().toString().slice(2, 6)}`)
+}
 </script>
 
 <template>
+  <TheCard my-5>
+    <div flex="~ items-center justify-center gap-2 wrap" mx-auto mb-5>
+      <TheButton @click="goPage('/')">
+        {{ t('button.index-page') }}
+      </TheButton>
+      <TheButton @click="goPage('/about')">
+        {{ t('button.about-page') }}
+      </TheButton>
+      <TheButton @click="goPage('/404')">
+        {{ t('button.404-page') }}
+      </TheButton>
+      <TheButton @click="goDynamicRoute">
+        {{ t('button.dynamic-route') }}
+      </TheButton>
+    </div>
+    <p>
+      {{ t('button.dynamic-route-description') }}
+    </p>
+  </TheCard>
   <TheCard my-5>
     <TheButton mx-auto mb-5 @click="toggleLogo">
       {{ headerLogo ? t('button.hide-logo') : t('button.show-logo') }}
     </TheButton>
-    <p>
-      {{ t('button.toggle-logo-description') }}
+    <p flex="~ items-center justify-center gap-2">
+      <i i-logos-pinia />
+      <span>{{ t('button.toggle-logo-description') }}</span>
     </p>
   </TheCard>
   <TheCard my-5>
     <TheButton mx-auto mb-5 :loading @click="fetchData">
-      {{ t('button.request') }}
+      {{ t('button.axios-request') }}
     </TheButton>
     <ul v-if="todoList && todoList.length > 0" w-full my-5 h-30 overflow-y-auto>
       <li v-for="item in todoList" :key="item.id">

src/pages/index.vue

@@ -19,7 +19,7 @@ body {
 }
 
 a {
-  --at-apply: op-75 hover:op-100;
+  --at-apply: dark:op-75  dark:hover:op-100 op-100 hover:op-75;
   text-decoration: underline;
 }
 

src/styles/main.css

@@ -21,5 +21,6 @@ declare module 'vue-router/auto-routes' {
     'index': RouteRecordInfo<'index', '/', Record<never, never>, Record<never, never>>,
     'not-found': RouteRecordInfo<'not-found', '/:path(.*)', { path: ParamValue<true> }, { path: ParamValue<false> }>,
     'about': RouteRecordInfo<'about', '/about', Record<never, never>, Record<never, never>>,
+    'dynamic': RouteRecordInfo<'dynamic', '/dynamic/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
   }
 }