unplugin-vue-router 数据加载器在同步模式下的注意事项

在使用 unplugin-vue-router 的数据加载器功能时，开发者需要注意一个重要细节：当路由配置为同步导入模式（importMode: 'sync'）时，动态路由参数变化不会自动触发数据加载器的刷新。

问题现象

在项目中定义了一个基于动态路由的数据加载器，例如用于获取用户信息的加载器：

import { defineBasicLoader } from 'unplugin-vue-router/data-loaders/basic';

function getUserById(id) {
  return Promise.resolve({
    id,
  })
}

export const useUserData = defineBasicLoader('/users/[id]', async (to) => {
  const user = await getUserById(to.params.id);
  return user;
})

当路由配置为同步模式时：

VueRouter({
  importMode: 'sync',
})

此时如果动态路由参数（如:id）发生变化，数据加载器不会自动重新获取数据。

技术原理

这个问题的根本原因在于同步导入模式的工作机制。在同步模式下，只有组件的default导出会被传递给路由系统，而其他导出（包括数据加载器）不会被自动检测到。因此，路由系统无法感知到数据加载器的存在，自然也无法在路由参数变化时触发其重新执行。

解决方案

正确的做法是使用definePage宏来显式声明页面路由，并在其中指定需要使用的数据加载器：

definePage({
  name: 'chat',
  meta: {
    auth: true,
    loaders: [useConversationData], // 显式声明使用的数据加载器
  },
});

然后在组件中正常使用数据加载器：

<script setup lang="js">
import { useConversationData } from '@/loaders';

// 路由定义
definePage({
  name: 'chat',
  meta: {
    auth: true,
    loaders: [useConversationData],
  },
});

// 使用数据
const { data: conversation } = useConversationData();
</script>

注意事项

1. 在definePage中不能直接使用变量，因为它的参数在构建时就会被提取出来并从<script setup>中移除
2. 应该使用导入的变量来指定数据加载器
3. 虽然TypeScript可能会显示类型错误，但实际功能可以正常工作

最佳实践

对于需要响应动态路由参数变化的数据加载场景，建议：

1. 优先使用异步导入模式（importMode: 'async'），以获得更完整的功能支持
2. 如果必须使用同步模式，务必通过definePage的meta.loaders显式声明数据加载器
3. 在组件中保持数据加载器的导入和使用方式一致

理解这些细节可以帮助开发者更好地利用unplugin-vue-router的数据加载功能，构建响应式更强的前端应用。