diff --git a/console-ui/src/locales/en-US.js b/console-ui/src/locales/en-US.js
index d9f0b97b30a..c8928566d91 100644
--- a/console-ui/src/locales/en-US.js
+++ b/console-ui/src/locales/en-US.js
@@ -119,6 +119,7 @@ const I18N_CONF = {
     prompt: 'Confirm',
     promptDelete: 'Do you want to delete the service?',
     create: 'Create Service',
+    subscriber: 'Subscriber',
   },
   SubscriberList: {
     subscriberList: 'Subscriber List',
diff --git a/console-ui/src/locales/zh-CN.js b/console-ui/src/locales/zh-CN.js
index 840a38252b9..2449ccee548 100644
--- a/console-ui/src/locales/zh-CN.js
+++ b/console-ui/src/locales/zh-CN.js
@@ -118,6 +118,7 @@ const I18N_CONF = {
     prompt: '提示',
     promptDelete: '确定要删除当前服务吗？',
     create: '创建服务',
+    subscriber: '订阅者',
   },
   SubscriberList: {
     subscriberList: '订阅者列表',
diff --git a/console-ui/src/pages/ServiceManagement/ServiceList/ServiceList.js b/console-ui/src/pages/ServiceManagement/ServiceList/ServiceList.js
index 36361566d22..b17e806500e 100644
--- a/console-ui/src/pages/ServiceManagement/ServiceList/ServiceList.js
+++ b/console-ui/src/pages/ServiceManagement/ServiceList/ServiceList.js
@@ -133,6 +133,12 @@ class ServiceList extends React.Component {
     this.showcode.current.getInstance().openDialog(record);
   }
 
+  querySubscriber(record) {
+    const { name, groupName } = record;
+    const namespace = this.state.nowNamespaceId;
+    this.props.history.push(generateUrl('/subscriberList', { namespace, name, groupName }));
+  }
+
   handlePageSizeChange(pageSize) {
     this.setState({ pageSize }, () => this.queryServiceList());
   }
@@ -187,6 +193,7 @@ class ServiceList extends React.Component {
       detail,
       sampleCode,
       deleteAction,
+      subscriber,
     } = locale;
     const { search, nowNamespaceName, nowNamespaceId, hasIpCount } = this.state;
     const { init, getValue } = this.field;
@@ -304,6 +311,10 @@ class ServiceList extends React.Component {
                       {sampleCode}
                     </a>
                     <span style={{ marginRight: 5 }}>|</span>
+                    <a style={{ marginRight: 5 }} onClick={() => this.querySubscriber(record)}>
+                      {subscriber}
+                    </a>
+                    <span style={{ marginRight: 5 }}>|</span>
                     <a onClick={() => this.deleteService(record)} style={{ marginRight: 5 }}>
                       {deleteAction}
                     </a>
diff --git a/console-ui/src/pages/ServiceManagement/SubscriberList/SubscriberList.js b/console-ui/src/pages/ServiceManagement/SubscriberList/SubscriberList.js
index be041b3267c..84985734f41 100644
--- a/console-ui/src/pages/ServiceManagement/SubscriberList/SubscriberList.js
+++ b/console-ui/src/pages/ServiceManagement/SubscriberList/SubscriberList.js
@@ -25,13 +25,12 @@ import {
   Loading,
   Pagination,
   Table,
-  Dialog,
   Message,
   ConfigProvider,
 } from '@alifd/next';
 import { connect } from 'react-redux';
 import { getSubscribers, removeSubscribers } from '../../../reducers/subscribers';
-import { request } from '../../../globalLib';
+import { getParams } from '../../../globalLib';
 import RegionGroup from '../../../components/RegionGroup';
 
 import './SubscriberList.scss';
@@ -60,13 +59,21 @@ class SubscriberList extends React.Component {
       pageSize: 10,
       pageNo: 1,
       search: {
-        serviceName: '',
-        groupName: '',
+        serviceName: getParams('name') || '',
+        groupName: getParams('groupName') || '',
       },
+      nowNamespaceId: getParams('namespace') || '',
     };
     this.field = new Field(this);
   }
 
+  componentDidMount() {
+    const { search } = this.state;
+    if (search.serviceName) {
+      this.querySubscriberList();
+    }
+  }
+
   openLoading() {
     this.setState({ loading: true });
   }
@@ -91,7 +98,6 @@ class SubscriberList extends React.Component {
   }
 
   switchNamespace = () => {
-    this.setState({ search: { serviceName: '', groupName: '' } });
     this.props.removeSubscribers();
   };