chore: Update main.css and main.ts, add data-loaders.[id].vue and update index-page.vue

src/pages/data-loaders.[id].vue

@@ -0,0 +1,69 @@
+<script lang="ts">
+// https://uvr.esm.is/data-loaders/rfc.html
+
+import { defineBasicLoader } from 'unplugin-vue-router/data-loaders/basic';
+
+export const usePageData = defineBasicLoader(
+  'DataLoadersId',
+  async (...args) => {
+    console.log('[DefineLoaderFn]', 'args :>> ', args);
+    const [route] = args;
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+    return { idFromPreviousPage: route.params.id, someOtherData: 'someOtherData' };
+  },
+  {
+    lazy: false,
+    // - `immediate`: the data is committed as soon as it is loaded.
+    // - `after-load`: the data is committed after all non-lazy loaders have finished loading.
+    // - `immediate`：数据在加载后立即提交。
+    // - `after-load`：数据在所有非惰性加载器加载完成后提交。
+    commit: 'immediate',
+  }
+);
+</script>
+
+<script setup lang="ts">
+definePage({
+  meta: {
+    metaKey: 'metaValue',
+  },
+});
+const {
+  data: pageData, // the data returned by the loader
+  isLoading, // a boolean indicating if the loader is fetching data
+  error, // an error object if the loader failed
+  reload, // a function to refetch the data without navigating
+} = usePageData();
+
+watch(
+  pageData,
+  (pageDataVal) => {
+    let message = [`[watch]`, `pageDataVal :>> `, pageDataVal];
+    if (pageDataVal === undefined) {
+      // hot updated 会造成 pageDataVal 为 undefined
+      console.warn(message);
+    } else {
+      console.debug(message);
+    }
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <h1>Data Loaders</h1>
+  <div flex="~ row">
+    <button @click="$router.back()">Back</button>
+    <button @click="reload()">Reload</button>
+  </div>
+  <main>
+    <p v-if="isLoading">Loading...</p>
+    <template v-else-if="error">
+      <p>{{ error.message }}</p>
+      <button @click="reload()">Retry</button>
+    </template>
+    <template v-else>
+      <p>{{ pageData }}</p>
+    </template>
+  </main>
+</template>

src/pages/index-page.vue

@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import { router } from '@/router';
-
 definePage({
   alias: '/',
 });
@@ -8,4 +6,5 @@ definePage({
 
 <template>
   <h1>Index Page</h1>
+  <router-link :to="{ name: 'DataLoadersId', params: { id: 520 } }">Data Loaders</router-link>
 </template>