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

src/assets/main.css

@@ -7,6 +7,7 @@
   font-weight: normal;
 }
 
+button,
 a,
 .green {
   text-decoration: none;
@@ -16,6 +17,7 @@ a,
 }
 
 @media (hover: hover) {
+  button:hover,
   a:hover {
     background-color: hsla(160, 100%, 37%, 0.2);
   }

src/main.ts

@@ -6,5 +6,12 @@ import { createPinia } from 'pinia';
 
 import App from './App.vue';
 import { router } from './router';
+import { DataLoaderPlugin } from 'unplugin-vue-router/data-loaders';
 
-createApp(App).use(createPinia()).use(router).mount('#app');
+createApp(App)
+  .use(createPinia())
+  // Register the plugin before the router
+  .use(DataLoaderPlugin, { router })
+  // adding the router will trigger the initial navigation
+  .use(router)
+  .mount('#app');

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>

typed-router.d.ts

@@ -18,6 +18,7 @@ declare module 'vue-router/auto-routes' {
    * Route name map generated by unplugin-vue-router
    */
   export interface RouteNamedMap {
+    'DataLoadersId': RouteRecordInfo<'DataLoadersId', '/data-loaders/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
     'IndexPage': RouteRecordInfo<'IndexPage', '/index-page', Record<never, never>, Record<never, never>>,
   }
 }