diff --git a/src/action-bar-button/index.js b/src/action-bar-button/index.js
index 2281f5af2..e345ec38e 100644
--- a/src/action-bar-button/index.js
+++ b/src/action-bar-button/index.js
@@ -1,8 +1,12 @@
 import { computed } from 'vue';
 import { createNamespace } from '../utils';
-import { useRoute, routeProps } from '../utils/router';
-import { useParent } from '../api/use-relation';
 import { ACTION_BAR_KEY } from '../action-bar';
+
+// Composition
+import { useParent } from '../composition/use-relation';
+import { useRoute, routeProps } from '../composition/use-route';
+
+// Components
 import Button from '../button';
 
 const [createComponent, bem] = createNamespace('action-bar-button');
diff --git a/src/action-bar-icon/index.js b/src/action-bar-icon/index.js
index b5f73a075..c3bd0e83f 100644
--- a/src/action-bar-icon/index.js
+++ b/src/action-bar-icon/index.js
@@ -1,7 +1,11 @@
 import { createNamespace } from '../utils';
-import { useRoute, routeProps } from '../utils/router';
-import { useParent } from '../api/use-relation';
 import { ACTION_BAR_KEY } from '../action-bar';
+
+// Composition
+import { useParent } from '../composition/use-relation';
+import { useRoute, routeProps } from '../composition/use-route';
+
+// Components
 import Icon from '../icon';
 import Badge from '../badge';
 
diff --git a/src/button/index.js b/src/button/index.js
index 77f044258..bbca69adf 100644
--- a/src/button/index.js
+++ b/src/button/index.js
@@ -1,7 +1,7 @@
 // Utils
 import { createNamespace } from '../utils';
 import { BORDER_SURROUND, WHITE } from '../utils/constant';
-import { useRoute, routeProps } from '../utils/router';
+import { useRoute, routeProps } from '../composition/use-route';
 
 // Components
 import Icon from '../icon';
diff --git a/src/calendar/components/Month.js b/src/calendar/components/Month.js
index 2ce0e88fa..bd20b89f5 100644
--- a/src/calendar/components/Month.js
+++ b/src/calendar/components/Month.js
@@ -15,9 +15,9 @@ import {
   formatMonthTitle,
 } from '../utils';
 
-// Compositions
-import { useHeight } from '../../api/use-rect';
-import { useToggle } from '../../api/use-toggle';
+// Composition
+import { useHeight } from '../../composition/use-rect';
+import { useToggle } from '../../composition/use-toggle';
 
 // Components
 import Day from './Day';
diff --git a/src/cell/index.js b/src/cell/index.js
index aa1dccaf9..523a29a09 100644
--- a/src/cell/index.js
+++ b/src/cell/index.js
@@ -1,8 +1,10 @@
 // Utils
 import { createNamespace, isDef } from '../utils';
-import { useRoute, routeProps } from '../utils/router';
 import { cellProps } from './shared';
 
+// Composition
+import { useRoute, routeProps } from '../composition/use-route';
+
 // Components
 import Icon from '../icon';
 
diff --git a/src/col/index.js b/src/col/index.js
index 81e3cdad9..c83d95856 100644
--- a/src/col/index.js
+++ b/src/col/index.js
@@ -1,6 +1,6 @@
 import { computed } from 'vue';
 import { createNamespace } from '../utils';
-import { useParent } from '../api/use-relation';
+import { useParent } from '../composition/use-relation';
 import { ROW_KEY } from '../row';
 
 const [createComponent, bem] = createNamespace('col');
diff --git a/src/collapse-item/index.js b/src/collapse-item/index.js
index c2dc3a32c..baae9d414 100644
--- a/src/collapse-item/index.js
+++ b/src/collapse-item/index.js
@@ -5,8 +5,8 @@ import { createNamespace, isDef } from '../utils';
 import { raf, doubleRaf } from '../utils/dom/raf';
 
 // Composition
-import { useParent } from '../api/use-relation';
-import { useLazyRender } from '../api/use-lazy-render';
+import { useParent } from '../composition/use-relation';
+import { useLazyRender } from '../composition/use-lazy-render';
 
 // Components
 import Cell from '../cell';
diff --git a/src/api/use-click-outside.ts b/src/composition/use-click-outside.ts
similarity index 100%
rename from src/api/use-click-outside.ts
rename to src/composition/use-click-outside.ts
diff --git a/src/api/use-global-event.ts b/src/composition/use-global-event.ts
similarity index 100%
rename from src/api/use-global-event.ts
rename to src/composition/use-global-event.ts
diff --git a/src/api/use-lazy-render.ts b/src/composition/use-lazy-render.ts
similarity index 100%
rename from src/api/use-lazy-render.ts
rename to src/composition/use-lazy-render.ts
diff --git a/src/api/use-lock-scroll.ts b/src/composition/use-lock-scroll.ts
similarity index 100%
rename from src/api/use-lock-scroll.ts
rename to src/composition/use-lock-scroll.ts
diff --git a/src/api/use-rect.ts b/src/composition/use-rect.ts
similarity index 100%
rename from src/api/use-rect.ts
rename to src/composition/use-rect.ts
diff --git a/src/api/use-relation.ts b/src/composition/use-relation.ts
similarity index 100%
rename from src/api/use-relation.ts
rename to src/composition/use-relation.ts
diff --git a/src/utils/router.ts b/src/composition/use-route.ts
similarity index 100%
rename from src/utils/router.ts
rename to src/composition/use-route.ts
diff --git a/src/api/use-toggle.ts b/src/composition/use-toggle.ts
similarity index 100%
rename from src/api/use-toggle.ts
rename to src/composition/use-toggle.ts
diff --git a/src/api/use-touch.ts b/src/composition/use-touch.ts
similarity index 100%
rename from src/api/use-touch.ts
rename to src/composition/use-touch.ts
diff --git a/src/grid-item/index.js b/src/grid-item/index.js
index dea4ddc70..e209337ce 100644
--- a/src/grid-item/index.js
+++ b/src/grid-item/index.js
@@ -1,7 +1,7 @@
 // Utils
 import { createNamespace, addUnit } from '../utils';
 import { BORDER } from '../utils/constant';
-import { route, routeProps } from '../utils/router';
+import { route, routeProps } from '../composition/use-route';
 
 // Mixins
 import { ChildrenMixin } from '../mixins/relation';
diff --git a/src/nav-bar/index.js b/src/nav-bar/index.js
index 348413003..775fdabb9 100644
--- a/src/nav-bar/index.js
+++ b/src/nav-bar/index.js
@@ -4,8 +4,8 @@ import { ref, onMounted } from 'vue';
 import { createNamespace } from '../utils';
 import { BORDER_BOTTOM } from '../utils/constant';
 
-// Compositions
-import { useHeight } from '../api/use-rect';
+// Composition
+import { useHeight } from '../composition/use-rect';
 
 // Components
 import Icon from '../icon';
diff --git a/src/sidebar-item/index.js b/src/sidebar-item/index.js
index 9e1790f59..6109de0b0 100644
--- a/src/sidebar-item/index.js
+++ b/src/sidebar-item/index.js
@@ -1,6 +1,6 @@
 import { createNamespace } from '../utils';
-import { useRoute, routeProps } from '../utils/router';
-import { useParent } from '../api/use-relation';
+import { useRoute, routeProps } from '../composition/use-route';
+import { useParent } from '../composition/use-relation';
 import { SIDEBAR_KEY } from '../sidebar';
 import Badge from '../badge';
 
diff --git a/src/tab/index.js b/src/tab/index.js
index c38407f03..b5b2e08e2 100644
--- a/src/tab/index.js
+++ b/src/tab/index.js
@@ -1,6 +1,6 @@
 import { isDef, createNamespace } from '../utils';
 import { ChildrenMixin } from '../mixins/relation';
-import { routeProps } from '../utils/router';
+import { routeProps } from '../composition/use-route';
 
 const [createComponent, bem] = createNamespace('tab');
 
diff --git a/src/tabbar-item/index.js b/src/tabbar-item/index.js
index 8d3e412b9..211da719b 100644
--- a/src/tabbar-item/index.js
+++ b/src/tabbar-item/index.js
@@ -1,6 +1,6 @@
 // Utils
 import { createNamespace, isObject, isDef } from '../utils';
-import { route, routeProps } from '../utils/router';
+import { route, routeProps } from '../composition/use-route';
 
 // Mixins
 import { ChildrenMixin } from '../mixins/relation';
diff --git a/src/tabs/index.js b/src/tabs/index.js
index 29a4ecf65..50ca7bae8 100644
--- a/src/tabs/index.js
+++ b/src/tabs/index.js
@@ -1,7 +1,7 @@
 // Utils
 import { createNamespace, isDef, addUnit, isPromise } from '../utils';
 import { scrollLeftTo, scrollTopTo } from './utils';
-import { route } from '../utils/router';
+import { route } from '../composition/use-route';
 import { isHidden } from '../utils/dom/style';
 import { on, off } from '../utils/dom/event';
 import { BORDER_TOP_BOTTOM } from '../utils/constant';