diff --git a/src/pages/network/containers/Port/Detail/BaseDetail/index.jsx b/src/pages/network/containers/Port/Detail/BaseDetail/index.jsx
index 1c079484..4a066931 100644
--- a/src/pages/network/containers/Port/Detail/BaseDetail/index.jsx
+++ b/src/pages/network/containers/Port/Detail/BaseDetail/index.jsx
@@ -12,8 +12,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React from 'react';
-import { Link } from 'react-router-dom';
 import { inject, observer } from 'mobx-react';
 import Base from 'containers/BaseDetail';
 import { qosEndpoint } from 'client/client/constants';
@@ -63,12 +61,17 @@ export class BaseDetail extends Base {
         label: t('QoS Policy'),
         dataIndex: 'qos_policy_id',
         copyable: false,
-        render: (data) =>
-          data ? (
-            <Link to={`/network/qos-policy/detail/${data}`}>{data}</Link>
-          ) : (
-            '-'
-          ),
+        render: (data) => {
+          if (!data) {
+            return '-';
+          }
+          const { qosPolicy } = this.detailData;
+          const { name } = qosPolicy || {};
+          const displayName = name ? `${data}(${name})` : data;
+          return this.getLinkRender('networkQosDetail', displayName, {
+            id: data,
+          });
+        },
       });
     }
     return {
diff --git a/src/stores/neutron/port-extension.js b/src/stores/neutron/port-extension.js
index c2db8795..f7edfe87 100644
--- a/src/stores/neutron/port-extension.js
+++ b/src/stores/neutron/port-extension.js
@@ -166,6 +166,16 @@ export class PortStore extends Base {
       });
     }
     item.itemInList = itemContrib;
+    const { qos_policy_id } = item;
+    if (qos_policy_id) {
+      try {
+        const { policy } = await client.neutron.qosPolicies.show(qos_policy_id);
+        item.qosPolicy = policy;
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.log('fetch qos error', e);
+      }
+    }
     return item;
   }