diff --git a/src/action-bar-button/index.js b/src/action-bar-button/index.js
index d18c2ff8b..084da9fd4 100644
--- a/src/action-bar-button/index.js
+++ b/src/action-bar-button/index.js
@@ -1,6 +1,6 @@
 import { computed } from 'vue';
 import { createNamespace } from '../utils';
-import { route, routeProps } from '../utils/router';
+import { useRoute, routeProps } from '../utils/router';
 import { useParent } from '../api/use-relation';
 import { ACTION_BAR_KEY } from '../action-bar';
 import Button from '../button';
@@ -19,6 +19,7 @@ export default createComponent({
   },
 
   setup(props, { slots }) {
+    const route = useRoute();
     const { parent, index } = useParent(ACTION_BAR_KEY, { isButton: true });
 
     const isFirst = computed(() => {
@@ -37,13 +38,9 @@ export default createComponent({
       }
     });
 
-    return (vm) => {
+    return () => {
       const { type, icon, text, color, loading, disabled } = props;
 
-      const onClick = () => {
-        route(vm.$router, vm);
-      };
-
       return (
         <Button
           class={bem([
@@ -59,7 +56,7 @@ export default createComponent({
           color={color}
           loading={loading}
           disabled={disabled}
-          onClick={onClick}
+          onClick={route}
         >
           {slots.default ? slots.default() : text}
         </Button>
diff --git a/src/action-bar-icon/index.js b/src/action-bar-icon/index.js
index 9799c8c0e..b5f73a075 100644
--- a/src/action-bar-icon/index.js
+++ b/src/action-bar-icon/index.js
@@ -1,5 +1,5 @@
 import { createNamespace } from '../utils';
-import { route, routeProps } from '../utils/router';
+import { useRoute, routeProps } from '../utils/router';
 import { useParent } from '../api/use-relation';
 import { ACTION_BAR_KEY } from '../action-bar';
 import Icon from '../icon';
@@ -19,6 +19,7 @@ export default createComponent({
   },
 
   setup(props, { slots }) {
+    const route = useRoute();
     useParent(ACTION_BAR_KEY);
 
     const renderIcon = () => {
@@ -45,15 +46,8 @@ export default createComponent({
       );
     };
 
-    return (vm) => (
-      <div
-        role="button"
-        class={bem()}
-        tabindex="0"
-        onClick={() => {
-          route(vm.$router, vm);
-        }}
-      >
+    return () => (
+      <div role="button" class={bem()} tabindex="0" onClick={route}>
         {renderIcon()}
         {slots.default ? slots.default() : props.text}
       </div>
diff --git a/src/button/index.js b/src/button/index.js
index 5628fa91b..862a5030f 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 { routeProps, route } from '../utils/router';
+import { useRoute, routeProps } from '../utils/router';
 
 // Components
 import Icon from '../icon';
@@ -47,6 +47,8 @@ export default createComponent({
   emits: ['click'],
 
   setup(props, { emit, slots }) {
+    const route = useRoute();
+
     const renderLoadingIcon = () => {
       if (slots.loading) {
         return slots.loading();
@@ -114,7 +116,7 @@ export default createComponent({
       }
     };
 
-    return (vm) => {
+    return () => {
       const {
         tag,
         type,
@@ -132,7 +134,7 @@ export default createComponent({
       const onClick = () => {
         if (!loading && !disabled) {
           emit('click', event);
-          route(vm.$router, vm);
+          route();
         }
       };
 
diff --git a/src/cell/index.js b/src/cell/index.js
index e7b7db6bd..aa1dccaf9 100644
--- a/src/cell/index.js
+++ b/src/cell/index.js
@@ -1,6 +1,6 @@
 // Utils
 import { createNamespace, isDef } from '../utils';
-import { route, routeProps } from '../utils/router';
+import { useRoute, routeProps } from '../utils/router';
 import { cellProps } from './shared';
 
 // Components
@@ -15,6 +15,8 @@ export default createComponent({
   },
 
   setup(props, { slots }) {
+    const route = useRoute();
+
     const renderLabel = () => {
       const showLabel = slots.label || isDef(props.label);
 
@@ -83,7 +85,7 @@ export default createComponent({
       }
     };
 
-    return (vm) => {
+    return () => {
       const { size, center, border, isLink, required } = props;
       const clickable = isLink || props.clickable;
 
@@ -97,16 +99,12 @@ export default createComponent({
         classes[size] = size;
       }
 
-      const onClick = () => {
-        route(vm.$router, vm);
-      };
-
       return (
         <div
           class={bem(classes)}
           role={clickable ? 'button' : null}
           tabindex={clickable ? 0 : null}
-          onClick={onClick}
+          onClick={route}
         >
           {renderLeftIcon()}
           {renderTitle()}
diff --git a/src/sidebar-item/index.js b/src/sidebar-item/index.js
index 3b84e3570..e5632f2d3 100644
--- a/src/sidebar-item/index.js
+++ b/src/sidebar-item/index.js
@@ -1,5 +1,5 @@
 import { createNamespace } from '../utils';
-import { route, routeProps } from '../utils/router';
+import { useRoute, routeProps } from '../utils/router';
 import { useParent } from '../api/use-relation';
 import { SIDEBAR_KEY } from '../sidebar';
 import Badge from '../badge';
@@ -18,9 +18,10 @@ export default createComponent({
   emits: ['click'],
 
   setup(props, { emit }) {
+    const route = useRoute();
     const { parent, index } = useParent(SIDEBAR_KEY);
 
-    return (vm) => {
+    return () => {
       const { dot, badge, title, disabled } = props;
       const selected = index.value === parent.active();
 
@@ -32,7 +33,7 @@ export default createComponent({
         emit('click', index.value);
         parent.emit('update:modelValue', index.value);
         parent.setActive(index.value);
-        route(vm.$router, vm);
+        route();
       };
 
       return (
diff --git a/src/utils/router.ts b/src/utils/router.ts
index 7e822dc31..ca34e9b51 100644
--- a/src/utils/router.ts
+++ b/src/utils/router.ts
@@ -1,7 +1,7 @@
 /**
  * Vue Router support
  */
-
+import { getCurrentInstance } from 'vue';
 import type { Router, RouteLocation } from 'vue-router';
 
 export type RouteConfig = {
@@ -18,8 +18,8 @@ function isRedundantNavigation(err: Error) {
   );
 }
 
-export function route(router: Router, config: RouteConfig) {
-  const { to, url, replace } = config;
+export function route(router: Router, props: RouteProps) {
+  const { to, url, replace } = props;
   if (to && router) {
     const promise = router[replace ? 'replace' : 'push'](to);
 
@@ -36,6 +36,13 @@ export function route(router: Router, config: RouteConfig) {
   }
 }
 
+export function useRoute() {
+  const vm = getCurrentInstance()!.proxy!;
+  return () => {
+    route(vm.$router, vm as RouteProps);
+  };
+}
+
 export type RouteProps = {
   url?: string;
   replace?: boolean;