diff --git a/src/router/modules/demo.ts b/src/router/modules/demo.ts
index e572402..675f16f 100644
--- a/src/router/modules/demo.ts
+++ b/src/router/modules/demo.ts
@@ -1,5 +1,33 @@
 const Layout = () => import('@/layout/index.vue');
 
+// @/views/demo/**/*.vue
+/**
+ * (使用 ** 表示递归查找)
+ * 递归匹配views/demo目录下所有.vue文件
+ * 也包含/demo/jsx/components/index.vue 这种某个页面的子组件
+ */
+
+// @/views/demo/*.vue       第一层目录
+// @/views/demo/*/*.vue     第二层目录
+/**
+ * 第一层目录 => 匹配views/demo目录下所有.vue文件(第一层)
+ * 例如 /views/demo/index.vue
+ *
+ * 第二层目录 => 匹配views/demo目录下所有文件夹下的.vue文件(第二层)
+ * 例如 /views/demo/jsx/index.vue
+ *
+ * 不会匹配/views/demo/jsx/components/index.vue 这种某个页面的子组件
+ */
+
+const firstLevelComponents = import.meta.glob('@/views/demo/*.vue');
+const secondLevelComponents = import.meta.glob('@/views/demo/*/*.vue');
+const components = { ...firstLevelComponents, ...secondLevelComponents };
+console.log(components);
+const demoRoutes = Object.keys(components).map((path) => {
+    console.log(path);
+    const component = components[path];
+});
+
 export default {
     path: '/demo',
     name: 'Demo',
@@ -13,7 +41,7 @@ export default {
     children: [
         {
             path: '/demo/jsx',
-            name: 'Jsx',
+            name: 'DemoJsx',
             component: () => import('@/views/demo/jsx/index.vue'),
             meta: {
                 title: '使用jsx',
diff --git a/src/utils/tools.ts b/src/utils/tools.ts
new file mode 100644
index 0000000..36ad1f9
--- /dev/null
+++ b/src/utils/tools.ts
@@ -0,0 +1,18 @@
+/** url地址相关工具 */
+export const url = {
+    /**
+     * 将对象转换为url参数形式，支持忽略指定字段
+     * @param obj { x: 1, y: 2, z: 3 }
+     * @param ignoreFields ['z']
+     * @returns x=1&y=2
+     */
+    objToUrlParma: (obj: Record<string, any>, ignoreFields: Array<string> = []): string => {
+        return (
+            '?' +
+            Object.keys(obj)
+                .filter((key) => ignoreFields.indexOf(key) === -1)
+                .map((key) => `${key}=${obj[key]}`)
+                .join('&')
+        );
+    },
+};
diff --git a/src/views/demo/jsx/index.vue b/src/views/demo/jsx/index.vue
index 3de0239..5900ec5 100644
--- a/src/views/demo/jsx/index.vue
+++ b/src/views/demo/jsx/index.vue
@@ -38,7 +38,7 @@ import styles from './jsx.module.scss';
  * 4. jsx在template中怎么写才能渲染
  */
 defineOptions({
-    name: 'Jsx',
+    name: 'DemoJsx',
 });
 
 const refs = ref({});
diff --git a/src/views/demo/tools/components/cmp.vue b/src/views/demo/tools/components/cmp.vue
new file mode 100644
index 0000000..db131ca
--- /dev/null
+++ b/src/views/demo/tools/components/cmp.vue
@@ -0,0 +1,15 @@
+<template>
+    <el-card> 基础模版 </el-card>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue';
+
+defineOptions({
+    name: 'DemoTools',
+});
+
+const page = ref({});
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/demo/tools/index.vue b/src/views/demo/tools/index.vue
new file mode 100644
index 0000000..db131ca
--- /dev/null
+++ b/src/views/demo/tools/index.vue
@@ -0,0 +1,15 @@
+<template>
+    <el-card> 基础模版 </el-card>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue';
+
+defineOptions({
+    name: 'DemoTools',
+});
+
+const page = ref({});
+</script>
+
+<style lang="scss" scoped></style>