{ path: '/test', component: () => import('../pages/testPage.vue'), },传递参数

在Vue.js中，`{ path: '/test', component: () => import('../pages/testPage.vue') }` 这是一个路由配置，它告诉框架当访问路径为 `/test` 时，渲染从 `../pages/testPage.vue` 模块导入的组件。如果想要传递参数给这个页面，可以添加动态段(`dynamic`)或者查询参数(query params)。

1. **动态路由** (通过冒号`:`): 例如，如果你想让参数名为`id`，你可以这样配置：

   {
     path: '/test/:id', // 使用 :id 表示路径的一部分将是动态参数
     component: () => import('../pages/TestPage.vue'),
     props: true, // 开启路由组件的 prop 预传
   }

然后在 `TestPage.vue` 中接收参数：

   <template>
     <div>你在测试页，ID是{{ $route.params.id }}</div>
   </template>

2. **查询参数** (使用问号`?`): 如果你想在URL中显示可选参数，可以用问号加上参数名：

   {
     path: '/test',
     component: () => import('../pages/TestPage.vue'),
     query: {
       param1: 'default value', // 默认值
       param2: '',
     },
   }

在页面上获取参数：

   <script setup>
     const queryParams = useQueryParams(); // 使用内置插件
     console.log(queryParams.param1);
   </script>