diff --git a/src-next/cell/index.js b/src-next/cell/index.js
index 4f4eb4964..83703384a 100644
--- a/src-next/cell/index.js
+++ b/src-next/cell/index.js
@@ -1,6 +1,6 @@
 // Utils
 import { createNamespace, isDef } from '../utils';
-import { routeProps } from '../utils/router';
+import { route, routeProps } from '../utils/router';
 import { cellProps } from './shared';
 
 // Components
@@ -15,102 +15,103 @@ export default createComponent({
   },
 
   setup(props, { slots, emit }) {
-    const { icon, size, title, label, value, isLink } = props;
-    const showTitle = slots.title || isDef(title);
-
-    function Label() {
-      const showLabel = slots.label || isDef(label);
-
-      if (showLabel) {
-        return (
-          <div class={[bem('label'), props.labelClass]}>
-            {slots.label ? slots.label() : label}
-          </div>
-        );
-      }
-    }
-
-    function Title() {
-      if (showTitle) {
-        return (
-          <div
-            class={[bem('title'), props.titleClass]}
-            style={props.titleStyle}
-          >
-            {slots.title ? slots.title() : <span>{title}</span>}
-            {Label()}
-          </div>
-        );
-      }
-    }
-
-    function Value() {
-      const showValue = slots.default || isDef(value);
-
-      if (showValue) {
-        return (
-          <div class={[bem('value', { alone: !showTitle }), props.valueClass]}>
-            {slots.default ? slots.default() : <span>{value}</span>}
-          </div>
-        );
-      }
-    }
-
-    function LeftIcon() {
-      if (slots.icon) {
-        return slots.icon();
-      }
-
-      if (icon) {
-        return (
-          <Icon
-            class={bem('left-icon')}
-            name={icon}
-            classPrefix={props.iconPrefix}
-          />
-        );
-      }
-    }
-
-    function RightIcon() {
-      const rightIconSlot = slots['right-icon'];
-
-      if (rightIconSlot) {
-        return rightIconSlot();
-      }
-
-      if (isLink) {
-        const { arrowDirection } = props;
-
-        return (
-          <Icon
-            class={bem('right-icon')}
-            name={arrowDirection ? `arrow-${arrowDirection}` : 'arrow'}
-          />
-        );
-      }
-    }
-
-    function onClick(event) {
-      emit('click', event);
-      // TODO
-      // functionalRoute(ctx);
-    }
-
-    const clickable = isLink || props.clickable;
-
-    const classes = {
-      clickable,
-      center: props.center,
-      required: props.required,
-      borderless: !props.border,
-    };
-
-    if (size) {
-      classes[size] = size;
-    }
-
     return function () {
+      const { icon, size, title, label, value, isLink } = props;
+      const showTitle = slots.title || isDef(title);
+
+      function Label() {
+        const showLabel = slots.label || isDef(label);
+
+        if (showLabel) {
+          return (
+            <div class={[bem('label'), props.labelClass]}>
+              {slots.label ? slots.label() : label}
+            </div>
+          );
+        }
+      }
+
+      function Title() {
+        if (showTitle) {
+          return (
+            <div
+              class={[bem('title'), props.titleClass]}
+              style={props.titleStyle}
+            >
+              {slots.title ? slots.title() : <span>{title}</span>}
+              {Label()}
+            </div>
+          );
+        }
+      }
+
+      function Value() {
+        const showValue = slots.default || isDef(value);
+
+        if (showValue) {
+          return (
+            <div
+              class={[bem('value', { alone: !showTitle }), props.valueClass]}
+            >
+              {slots.default ? slots.default() : <span>{value}</span>}
+            </div>
+          );
+        }
+      }
+
+      function LeftIcon() {
+        if (slots.icon) {
+          return slots.icon();
+        }
+
+        if (icon) {
+          return (
+            <Icon
+              class={bem('left-icon')}
+              name={icon}
+              classPrefix={props.iconPrefix}
+            />
+          );
+        }
+      }
+
+      function RightIcon() {
+        const rightIconSlot = slots['right-icon'];
+
+        if (rightIconSlot) {
+          return rightIconSlot();
+        }
+
+        if (isLink) {
+          const { arrowDirection } = props;
+
+          return (
+            <Icon
+              class={bem('right-icon')}
+              name={arrowDirection ? `arrow-${arrowDirection}` : 'arrow'}
+            />
+          );
+        }
+      }
+
+      const onClick = (event) => {
+        emit('click', event);
+        route(this.$router, this);
+      };
+
+      const clickable = isLink || props.clickable;
+
+      const classes = {
+        clickable,
+        center: props.center,
+        required: props.required,
+        borderless: !props.border,
+      };
+
+      if (size) {
+        classes[size] = size;
+      }
+
       return (
         <div
           class={bem(classes)}