refactor: Use SFC <route> block for routes (#102)

Author: cwandev

src/pages/README.md

@@ -1,5 +1,5 @@
-# `definePage`
-
-We used macro [`definePage()`](https://github.com/posva/unplugin-vue-router?tab=readme-ov-file#extending-existing-routes) to define the route name and meta information for each page, making it easy to control the transition animations for each route.
-
-我们使用 宏 [`definePage()`](https://github.com/posva/unplugin-vue-router?tab=readme-ov-file#extending-existing-routes) 定义每个页面的路由名称和元信息，可以轻松控制每个路由的过渡动画。
+# SFC `<route>` custom block
+
+We used SFC <route> [`<route>`](https://uvr.esm.is/guide/extending-routes.html#sfc-route-custom-block) custom block to define the route name and meta information for each page, making it easy to control the transition animations for each route.
+
+我们使用 SFC [`<route>`](https://uvr.esm.is/guide/extending-routes.html#sfc-route-custom-block) 自定义块定义每个页面的路由名称和元信息，可以轻松控制每个路由的过渡动画。

src/pages/[...all].vue

@@ -1,11 +1,4 @@
 <script setup lang="ts">
-definePage({
-  name: '404',
-  meta: {
-    level: 2,
-  },
-})
-
 const router = useRouter()
 
 function onBack() {
@@ -30,3 +23,12 @@ function onBack() {
     </div>
   </Container>
 </template>
+
+<route lang="json">
+{
+  "name": "404",
+  "meta": {
+    "level": 2
+  }
+}
+</route>

src/pages/charts/index.vue

@@ -1,13 +1,4 @@
 <script setup lang="ts">
-definePage({
-  name: 'charts',
-  meta: {
-    level: 2,
-    title: '📊 Echarts 演示',
-    i18n: 'home.echartsDemo',
-  },
-})
-
 const { t } = useI18n()
 
 const barOption = {
@@ -75,3 +66,14 @@ const refScoreOption = ref(scoreOption)
     <Chart :option="refScoreOption" :style="{ height: '330px' }" />
   </Container>
 </template>
+
+<route lang="json">
+{
+  "name": "charts",
+  "meta": {
+    "level": 2,
+    "title": "📊 Echarts 演示",
+    "i18n": "home.echartsDemo"
+  }
+}
+</route>

src/pages/counter/index.vue

@@ -2,15 +2,6 @@
 import { storeToRefs } from 'pinia'
 import useCounterStore from '@/stores/modules/counter'
 
-definePage({
-  name: 'counter',
-  meta: {
-    level: 2,
-    title: '🍍 持久化 Pinia 状态',
-    i18n: 'home.persistPiniaState',
-  },
-})
-
 const counterStore = useCounterStore()
 const { counter } = storeToRefs(counterStore)
 
@@ -39,3 +30,14 @@ function add() {
     </button>
   </container>
 </template>
+
+<route lang="json">
+{
+  "name": "counter",
+  "meta": {
+    "level": 2,
+    "title": "🍍 持久化 Pinia 状态",
+    "i18n": "home.persistPiniaState"
+  }
+}
+</route>

src/pages/index.vue

@@ -3,13 +3,6 @@ import type { PickerColumn } from 'vant'
 import useAppStore from '@/stores/modules/app'
 import { languageColumns, locale } from '@/utils/i18n'
 
-definePage({
-  name: 'home',
-  meta: {
-    level: 1,
-  },
-})
-
 const appStore = useAppStore()
 const checked = ref<boolean>(isDark.value)
 
@@ -78,3 +71,12 @@ const menuItems = computed(() => ([
     </VanCellGroup>
   </Container>
 </template>
+
+<route lang="json">
+{
+  "name": "home",
+  "meta": {
+    "level": 1
+  }
+}
+</route>

src/pages/keepalive/index.vue

@@ -3,16 +3,6 @@ defineOptions({
   name: 'KeepAlive',
 })
 
-definePage({
-  name: 'KeepAlive',
-  meta: {
-    level: 2,
-    title: '🧡 KeepAlive',
-    i18n: 'home.keepAlive',
-    keepAlive: true,
-  },
-})
-
 const value = ref(1)
 </script>
 
@@ -22,3 +12,15 @@ const value = ref(1)
     <van-stepper v-model="value" />
   </Container>
 </template>
+
+<route lang="json">
+{
+  "name": "KeepAlive",
+  "meta": {
+    "level": 2,
+    "title": "🧡 KeepAlive",
+    "i18n": "home.keepAlive",
+    "keepAlive": true
+  }
+}
+</route>

src/pages/login/index.vue

@@ -4,14 +4,6 @@ import { useUserStore } from '@/stores'
 
 import defaultAvatar from '@/assets/images/default-avatar.svg'
 
-definePage({
-  name: 'login',
-  meta: {
-    level: 2,
-    i18n: 'home.login',
-  },
-})
-
 const { t } = useI18n()
 const router = useRouter()
 const userStore = useUserStore()
@@ -68,3 +60,13 @@ async function asyncLogin(values: any) {
     </div>
   </Container>
 </template>
+
+<route lang="json">
+{
+  "name": "login",
+  "meta": {
+    "level": 2,
+    "i18n": "home.login"
+  }
+}
+</route>

src/pages/mock/index.vue

@@ -1,15 +1,6 @@
 <script setup lang="ts">
 import { queryProse } from '@/api'
 
-definePage({
-  name: 'mock',
-  meta: {
-    level: 2,
-    title: '💿 Mock 指南',
-    i18n: 'home.mockGuide',
-  },
-})
-
 const messages = ref<string>('')
 
 function pull() {
@@ -44,6 +35,17 @@ function pull() {
   </Container>
 </template>
 
+<route lang="json">
+{
+  "name": "mock",
+  "meta": {
+    "level": 2,
+    "title": "💿 Mock 指南",
+    "i18n": "home.mockGuide"
+  }
+}
+</route>
+
 <style lang="less" scoped>
 .data-label {
   color: #969799;

src/pages/profile/index.vue

@@ -3,13 +3,6 @@ import router from '@/router'
 import { useUserStore } from '@/stores'
 import defaultAvatar from '@/assets/images/default-avatar.svg'
 
-definePage({
-  name: 'profile',
-  meta: {
-    level: 1,
-  },
-})
-
 const { t } = useI18n()
 const userStore = useUserStore()
 const userInfo = computed(() => userStore.userInfo)
@@ -49,3 +42,12 @@ function logout() {
     </div>
   </Container>
 </template>
+
+<route lang="json">
+{
+  "name": "profile",
+  "meta": {
+    "level": 1
+  }
+}
+</route>

src/pages/unocss/index.vue

@@ -1,14 +1,3 @@
-<script setup lang="ts">
-definePage({
-  name: 'unocss',
-  meta: {
-    level: 2,
-    title: '🎨 Unocss 示例',
-    i18n: 'home.unocssExample',
-  },
-})
-</script>
-
 <template>
   <Container>
     <h1 class="text-6xl color-pink font-semibold">
@@ -24,3 +13,14 @@ definePage({
     </button>
   </Container>
 </template>
+
+<route lang="json">
+{
+  "name": "unocss",
+  "meta": {
+    "level": 2,
+    "title": "🎨 Unocss 示例",
+    "i18n": "home.unocssExample"
+  }
+}
+</route>