diff --git a/ui-vue3/src/views/resources/services/tabs/paramRoute.vue b/ui-vue3/src/views/resources/services/tabs/paramRoute.vue
new file mode 100644
index 0000000..8d7ae99
--- /dev/null
+++ b/ui-vue3/src/views/resources/services/tabs/paramRoute.vue
@@ -0,0 +1,170 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one or more
+  ~ contributor license agreements.  See the NOTICE file distributed with
+  ~ this work for additional information regarding copyright ownership.
+  ~ The ASF licenses this file to You under the Apache License, Version 2.0
+  ~ (the "License"); you may not use this file except in compliance with
+  ~ the License.  You may obtain a copy of the License at
+  ~
+  ~     http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+-->
+<template>
+  <div class="__container_services_tabs_param_route">
+    <a-card :bordered="false" style="width: 800px">
+      <template #title>
+        <a-flex justify="space-between">
+          <span>路由</span>
+          <a-flex class="handle-form">
+            <EditOutlined style="font-size: 18px" />
+            <DeleteOutlined style="font-size: 18px" />
+          </a-flex>
+        </a-flex>
+      </template>
+      <a-form-item
+        label="选择方法"
+      >
+        <a-select
+          v-model:value="method.value"
+          style="width: 120px"
+        >
+          <a-select-option v-for="item, index in method.selectArr" :value="item" :key="index">
+            {{ item }}
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item
+        label="指定方法参数"
+      >
+        <a-table :columns="functionParamsColumn" :data-source="props.paramRouteForm.functionParams" :pagination="false">
+          <template #bodyCell="{ column, index }">
+            <template v-if="column.dataIndex === 'param'">
+              <a-input v-model:value="functionParamsEdit[index].param" />
+            </template>
+            <template v-if="column.dataIndex === 'relation'">
+              <a-input v-model:value="functionParamsEdit[index].relation" />
+            </template>
+            <template v-if="column.dataIndex === 'value'">
+              <a-input v-model:value="functionParamsEdit[index].value" />
+            </template>
+            <template v-if="column.dataIndex === 'handle'">
+              <PlusOutlined style="font-size: 18px" />
+              <MinusOutlined style="font-size: 18px" />
+            </template>
+          </template>
+        </a-table>
+      </a-form-item>
+      <a-form-item
+        label="路由目的地"
+      >
+        <a-table :columns="destinationColumn" :data-source="props.paramRouteForm.destination" :pagination="false">
+          <template #bodyCell="{ column, index }">
+            <template v-if="column.dataIndex === 'label'">
+              <a-input v-model:value="destinationEdit[index].label" />
+            </template>
+            <template v-if="column.dataIndex === 'relation'">
+              <a-input v-model:value="destinationEdit[index].relation" />
+            </template>
+            <template v-if="column.dataIndex === 'value'">
+              <a-input v-model:value="destinationEdit[index].value" />
+            </template>
+            <template v-if="column.dataIndex === 'weight'">
+              <a-input v-model:value="destinationEdit[index].weight" />
+            </template>
+            <template v-if="column.dataIndex === 'handle'">
+              <PlusOutlined style="font-size: 18px" />
+              <MinusOutlined style="font-size: 18px" />
+            </template>
+          </template>
+        </a-table>
+      </a-form-item>
+    </a-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { EditOutlined, DeleteOutlined, PlusOutlined, MinusOutlined } from '@ant-design/icons-vue';
+import { ref } from 'vue'
+
+const props = defineProps<{
+  paramRouteForm: {
+    type: Object,
+    default: {}
+  },
+}>()
+
+const method = ref(JSON.parse(JSON.stringify(props.paramRouteForm.method)));
+const functionParamsEdit = ref(JSON.parse(JSON.stringify(props.paramRouteForm.functionParams)))
+const destinationEdit = ref(JSON.parse(JSON.stringify(props.paramRouteForm.destination)))
+
+const functionParamsColumn = [
+  {
+    title: '参数索引',
+    key: 'param',
+    dataIndex: 'param',
+    width: '30%'
+  },
+  {
+    title: '关系',
+    key: 'relation',
+    dataIndex: 'relation',
+    width: '30%'
+  },
+  {
+    title: '值',
+    key: 'value',
+    dataIndex: 'value',
+    width: '30%'
+  },
+  {
+    title: '操作',
+    key: 'handle',
+    dataIndex: 'handle',
+    width: '10%'
+  },
+]
+
+const destinationColumn = [
+{
+    title: '标签',
+    key: 'label',
+    dataIndex: 'label',
+    width: '25%'
+  },
+  {
+    title: '关系',
+    key: 'relation',
+    dataIndex: 'relation',
+    width: '25%'
+  },
+  {
+    title: '值',
+    key: 'value',
+    dataIndex: 'value',
+    width: '25%'
+  },
+  {
+    title: '权重',
+    key: 'weight',
+    dataIndex: 'weight',
+    width: '15%'
+  },
+  {
+    title: '操作',
+    key: 'handle',
+    dataIndex: 'handle',
+    width: '10%'
+  },
+]
+</script>
+
+<style lang="less" scoped>
+.__container_services_tabs_param_route {
+
+}
+</style>