diff --git a/src/router/modules/charts.js b/src/router/modules/charts.js
index ea2b2bfc..7c823a0f 100644
--- a/src/router/modules/charts.js
+++ b/src/router/modules/charts.js
@@ -28,37 +28,13 @@ const chartsRouter = {
       path: 'show_policy',
       component: () => import('@/views/route/show_policy.vue'),
       name: 'ShowPolicy',
-      meta: { title: '查看路由', noCache: true }
+      meta: { title: '路由策略管理', noCache: true }
     },
     {
       path: 'show_steer',
       component: () => import('@/views/route/show_steer'),
       name: 'ShowSteer',
-      meta: { title: '查看引导', noCache: true }
-    },
-    {
-      path: 'add_policy',
-      component: () => import('@/views/route/add_policy.vue'),
-      name: 'AddPolicy',
-      meta: { title: '添加路由', noCache: true }
-    },
-    {
-      path: 'steer',
-      component: () => import('@/views/route/steer.vue'),
-      name: 'Steer',
-      meta: { title: '更新引导', noCache: true }
-    },
-    {
-      path: 'del_steer',
-      component: () => import('@/views/route/del_steer.vue'),
-      name: 'DelSteer',
-      meta: { title: '删除引导', noCache: true }
-    },
-    {
-      path: 'del_policy',
-      component: () => import('@/views/route/del_policy.vue'),
-      name: 'DelPolicy',
-      meta: { title: '删除路由', noCache: true }
+      meta: { title: '引导策略管理', noCache: true }
     }
   ]
 }
diff --git a/src/views/route/show_policy.vue b/src/views/route/show_policy.vue
index a895a10c..713570c9 100644
--- a/src/views/route/show_policy.vue
+++ b/src/views/route/show_policy.vue
@@ -1,107 +1,171 @@
 <template>
-  <div class="show-policy">
-    <h2>SRv6路径: {{ selectedRouter }}</h2>
+  <div class="policy-management">
+    <div class="header">
+      <h2>路由策略管理</h2>
+      <el-button type="primary" @click="openAddPolicyDialog">添加策略</el-button>
+    </div>
 
-    <!-- 路由器选择器 -->
     <div class="router-selector">
-      <label for="router">选择路由器:</label>
-      <select v-model="selectedRouter" @change="fetchPolicyInfo">
-        <option value="r0">r0</option>
-        <option value="r3">r3</option>
-        <option value="r6">r6</option>
-      </select>
+      <label for="router-select">选择路由器: </label>
+      <el-select v-model="selectedRouter" placeholder="选择路由器" @change="fetchPolicies">
+        <el-option label="r0" value="r0" />
+        <el-option label="r3" value="r3" />
+        <el-option label="r6" value="r6" />
+      </el-select>
     </div>
 
-    <!-- 显示加载状态 -->
-    <div v-if="loading">加载路径信息...</div>
+    <el-table :data="policies" border style="width: 100%" height="400">
+      <el-table-column label="BSID" prop="BSID" />
+      <el-table-column label="行为" prop="Behavior" />
+      <el-table-column label="类型" prop="Type" />
+      <el-table-column label="FIB 表" prop="FIB_table" />
+      <el-table-column label="Segment 列表" prop="Segment_Lists" />
+      <el-table-column label="操作">
+        <template slot-scope="scope">
+          <el-button type="danger" icon="el-icon-delete" @click="deletePolicy(scope.row.BSID)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
 
-    <!-- 列表形式展示策略信息 -->
-    <ul v-if="!loading && policyData.length > 0" class="policy-list">
-      <li v-for="(policy, index) in policyData" :key="index">
-        {{ policy }}
-      </li>
-    </ul>
+    <!-- 添加策略弹窗 -->
+    <el-dialog
+      title="添加SRv6路由策略"
+      :visible.sync="isAddPolicyDialogVisible"
+      width="400px"
+      @close="resetForm"
+    >
+      <el-form ref="policyForm" :model="policyForm" label-width="100px">
+        <el-form-item label="路由器" prop="router" :rules="[{ required: true, message: '请选择路由器', trigger: 'blur' }]">
+          <el-select v-model="policyForm.router" placeholder="选择路由器">
+            <el-option label="r0" value="r0" />
+            <el-option label="r3" value="r3" />
+            <el-option label="r6" value="r6" />
+          </el-select>
+        </el-form-item>
 
-    <!-- 如果没有策略信息 -->
-    <div v-else-if="!loading && policyData.length === 0">
-      <p>No policy information available for the selected router.</p>
-    </div>
+        <el-form-item label="BSID" prop="bsid" :rules="[{ required: true, message: '请输入BSID', trigger: 'blur' }]">
+          <el-input v-model="policyForm.bsid" placeholder="fe00::1a" />
+        </el-form-item>
 
-    <!-- 错误信息 -->
-    <div v-if="error" class="error-message">
-      <p>Error loading policy information: {{ error }}</p>
-    </div>
+        <el-form-item label="SID列表" prop="sids" :rules="[{ required: true, message: '请输入SID', trigger: 'blur' }]">
+          <el-input v-model="policyForm.sids" placeholder="fc00:1::a,fc00:2::a(逗号分隔)" />
+        </el-form-item>
+      </el-form>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="isAddPolicyDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="submitPolicy">添加路由</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { API_URL } from '@/config/APIconfig'
 import axios from 'axios'
+import { API_URL } from '@/config/APIconfig'
 
 export default {
-  name: 'ShowPolicy',
+  name: 'PolicyManagement',
   data() {
     return {
-      selectedRouter: 'r0', // 默认选择 r0
-      policyData: [],
+      selectedRouter: 'r0', // 默认路由器
+      policies: [], // 存储策略信息
+      error: null,
       loading: false,
-      error: null
+      isAddPolicyDialogVisible: false, // 控制弹窗显示
+      policyForm: {
+        router: '',
+        bsid: '',
+        sids: ''
+      }
     }
   },
   mounted() {
-    // 组件挂载时请求默认路由器的策略信息
-    this.fetchPolicyInfo()
+    this.fetchPolicies()
   },
   methods: {
-    // 请求 API 以获取策略信息
-    fetchPolicyInfo() {
-      this.loading = true
-      this.error = null
-      axios
-        .get(API_URL + `/route/show_policy`, { params: { router: this.selectedRouter }})
-        .then((response) => {
-          if (response.data && response.data.policies) {
-            this.policyData = response.data.policies // 保存策略数据
-          } else {
-            this.policyData = []
-            this.error = 'No policy data found in the response.'
+    // 获取策略信息
+    fetchPolicies() {
+      axios.get(`${API_URL}/route/show_policy?router=${this.selectedRouter}`)
+        .then(response => {
+          if (response.data.policies) {
+            this.policies = response.data.policies
           }
         })
-        .catch((error) => {
-          this.error = error.message || 'An error occurred while fetching policy data.'
+        .catch(error => {
+          console.error('获取策略数据失败:', error)
         })
-        .finally(() => {
-          this.loading = false
+    },
+    // 删除策略
+    deletePolicy(bsid) {
+      axios.delete(`${API_URL}/route/del_policy?router=${this.selectedRouter}`, {
+        data: {
+          bsid: bsid // 将 bsid 放在请求体中
+        }
+      })
+        .then(response => {
+          if (response.data.success) {
+            this.$message.success('删除成功')
+            this.fetchPolicies() // 刷新策略列表
+          } else {
+            this.$message.error('删除失败')
+          }
         })
+        .catch(error => {
+          console.error('删除策略失败:', error)
+          this.$message.error('删除失败')
+        })
+    },
+    // 打开添加策略弹窗
+    openAddPolicyDialog() {
+      this.isAddPolicyDialogVisible = true
+    },
+    // 提交添加策略
+    submitPolicy() {
+      axios.post(`${API_URL}/route/add_policy?router=${this.policyForm.router}`, {
+        bsid: this.policyForm.bsid,
+        sids: this.policyForm.sids
+      })
+        .then(response => {
+          if (response.data.success) {
+            this.$message.success('添加成功')
+            this.isAddPolicyDialogVisible = false
+            this.fetchPolicies() // 刷新策略列表
+          } else {
+            this.$message.error('添加失败')
+          }
+        })
+        .catch(error => {
+          console.error('添加策略失败:', error)
+          this.$message.error('添加失败')
+        })
+    },
+    // 重置表单
+    resetForm() {
+      this.policyForm.bsid = ''
+      this.policyForm.sids = ''
+      this.policyForm.router = ''
     }
   }
 }
 </script>
 
 <style scoped>
-.show-policy {
+.policy-management {
   font-family: Arial, sans-serif;
   padding: 20px;
 }
 
-.router-selector {
-  margin-bottom: 20px;
-}
-
-ul.policy-list {
-  list-style-type: none;
-  padding-left: 0;
-}
-
-ul.policy-list li {
-  background-color: #ffffff;
-  margin-bottom: 5px;
-  padding: 5px;
-  border: 1px solid #ffffff;
+.el-table {
+  margin-top: 20px;
 }
 
 .error-message {
   color: red;
   font-weight: bold;
 }
+
+.el-button {
+  margin-bottom: 20px;
+}
 </style>
diff --git a/src/views/route/show_steer.vue b/src/views/route/show_steer.vue
index faf18c7d..b49ee7ec 100644
--- a/src/views/route/show_steer.vue
+++ b/src/views/route/show_steer.vue
@@ -1,107 +1,168 @@
 <template>
-  <div class="show-steer">
-    <h2>流量引导: {{ selectedRouter }}</h2>
+  <div class="steer-management">
+    <div class="header">
+      <h2>引导策略管理</h2>
+      <el-button type="primary" @click="openAddPolicyDialog">添加引导</el-button>
+    </div>
 
-    <!-- 路由器选择器 -->
     <div class="router-selector">
-      <label for="router">选择路由器:</label>
-      <select v-model="selectedRouter" @change="fetchSteerInfo">
-        <option value="r0">r0</option>
-        <option value="r3">r3</option>
-        <option value="r6">r6</option>
-      </select>
+      <label for="router-select">选择路由器: </label>
+      <el-select v-model="selectedRouter" placeholder="选择路由器" @change="fetchPolicies">
+        <el-option label="r0" value="r0" />
+        <el-option label="r3" value="r3" />
+        <el-option label="r6" value="r6" />
+      </el-select>
     </div>
 
-    <!-- 显示加载状态 -->
-    <div v-if="loading">加载引导信息...</div>
+    <el-table :data="policies" border style="width: 100%" height="400">
+      <el-table-column label="BSID" prop="BSID" />
+      <el-table-column label="目标IP" prop="Traffic" />
+      <el-table-column label="操作">
+        <template slot-scope="scope">
+          <el-button type="danger" icon="el-icon-delete" @click="deletePolicy(scope.row.Traffic)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
 
-    <!-- 列表形式展示策略信息 -->
-    <ul v-if="!loading && policyData.length > 0" class="steer-list">
-      <li v-for="(policy, index) in policyData" :key="index">
-        {{ policy }}
-      </li>
-    </ul>
+    <!-- 添加策略弹窗 -->
+    <el-dialog
+      title="添加SRv6引导策略"
+      :visible.sync="isAddPolicyDialogVisible"
+      width="400px"
+      @close="resetForm"
+    >
+      <el-form ref="policyForm" :model="policyForm" label-width="100px">
+        <el-form-item label="路由器" prop="router" :rules="[{ required: true, message: '请选择路由器', trigger: 'blur' }]">
+          <el-select v-model="policyForm.router" placeholder="选择路由器">
+            <el-option label="r0" value="r0" />
+            <el-option label="r3" value="r3" />
+            <el-option label="r6" value="r6" />
+          </el-select>
+        </el-form-item>
 
-    <!-- 如果没有策略信息 -->
-    <div v-else-if="!loading && policyData.length === 0">
-      <p>No steer information available for the selected router.</p>
-    </div>
+        <el-form-item label="BSID" prop="bsid" :rules="[{ required: true, message: '请输入BSID', trigger: 'blur' }]">
+          <el-input v-model="policyForm.bsid" placeholder="fe00::1a" />
+        </el-form-item>
 
-    <!-- 错误信息 -->
-    <div v-if="error" class="error-message">
-      <p>Error loading steer information: {{ error }}</p>
-    </div>
+        <el-form-item label="目标IP" prop="sids" :rules="[{ required: true, message: '请输入IP', trigger: 'blur' }]">
+          <el-input v-model="policyForm.ip" placeholder="10.0.10.0/24" />
+        </el-form-item>
+      </el-form>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="isAddPolicyDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="submitPolicy">添加路由</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { API_URL } from '@/config/APIconfig'
 import axios from 'axios'
+import { API_URL } from '@/config/APIconfig'
 
 export default {
-  name: 'ShowSteer',
+  name: 'PolicyManagement',
   data() {
     return {
-      selectedRouter: 'r0', // 默认选择 r0
-      policyData: [],
+      selectedRouter: 'r0', // 默认路由器
+      policies: [], // 存储策略信息
+      error: null,
       loading: false,
-      error: null
+      isAddPolicyDialogVisible: false, // 控制弹窗显示
+      policyForm: {
+        router: '',
+        bsid: '',
+        ip: ''
+      }
     }
   },
   mounted() {
-    // 组件挂载时请求默认路由器的策略信息
-    this.fetchSteerInfo()
+    this.fetchPolicies()
   },
   methods: {
-    // 请求 API 以获取策略信息
-    fetchSteerInfo() {
-      this.loading = true
-      this.error = null
-      axios
-        .get(API_URL + `/route/show_steer`, { params: { router: this.selectedRouter }})
-        .then((response) => {
-          if (response.data && response.data.steering_policies) {
-            this.policyData = response.data.steering_policies // 保存策略数据
-          } else {
-            this.policyData = []
-            this.error = 'No policy data found in the response.'
+    // 获取策略信息
+    fetchPolicies() {
+      axios.get(`${API_URL}/route/show_steer?router=${this.selectedRouter}`)
+        .then(response => {
+          if (response.data.steer) {
+            this.policies = response.data.steer
           }
         })
-        .catch((error) => {
-          this.error = error.message || 'An error occurred while fetching policy data.'
+        .catch(error => {
+          console.error('获取引导策略数据失败:', error)
         })
-        .finally(() => {
-          this.loading = false
+    },
+    // 删除策略
+    deletePolicy(ip) {
+      axios.delete(`${API_URL}/route/del_steer?router=${this.selectedRouter}`, {
+        data: {
+          ip_prefix: ip
+        }
+      })
+        .then(response => {
+          if (response.data.success) {
+            this.$message.success('删除成功')
+            this.fetchPolicies() // 刷新策略列表
+          } else {
+            this.$message.error('删除失败')
+          }
         })
+        .catch(error => {
+          console.error('删除引导失败:', error)
+          this.$message.error('删除失败')
+        })
+    },
+    // 打开添加策略弹窗
+    openAddPolicyDialog() {
+      this.isAddPolicyDialogVisible = true
+    },
+    // 提交添加策略
+    submitPolicy() {
+      axios.post(`${API_URL}/route/steer?router=${this.policyForm.router}`, {
+        bsid: this.policyForm.bsid,
+        ip_prefix: this.policyForm.ip
+      })
+        .then(response => {
+          if (response.data.success) {
+            this.$message.success('添加成功')
+            this.isAddPolicyDialogVisible = false
+            this.fetchPolicies() // 刷新策略列表
+          } else {
+            this.$message.error('添加失败')
+          }
+        })
+        .catch(error => {
+          console.error('添加引导策略失败:', error)
+          this.$message.error('添加失败')
+        })
+    },
+    // 重置表单
+    resetForm() {
+      this.policyForm.bsid = ''
+      this.policyForm.ip = ''
+      this.policyForm.router = ''
     }
   }
 }
 </script>
 
 <style scoped>
-.show-steer {
+.steer-management {
   font-family: Arial, sans-serif;
   padding: 20px;
 }
 
-.router-selector {
-  margin-bottom: 20px;
-}
-
-ul.steer-list {
-  list-style-type: none;
-  padding-left: 0;
-}
-
-ul.steer-list li {
-  background-color: #ffffff;
-  margin-bottom: 5px;
-  padding: 5px;
-  border: 1px solid #ffffff;
+.el-table {
+  margin-top: 20px;
 }
 
 .error-message {
   color: red;
   font-weight: bold;
 }
+
+.el-button {
+  margin-bottom: 20px;
+}
 </style>