From b55b53aa4bda28078013e560fb19ebcbd76033a4 Mon Sep 17 00:00:00 2001
From: cuigh <noname@live.com>
Date: Fri, 24 Dec 2021 11:28:42 +0800
Subject: [PATCH] Use name of URL instead of path

---
 ui/src/pages/Home.vue           |  8 ++++----
 ui/src/pages/config/Edit.vue    |  4 ++--
 ui/src/pages/config/List.vue    |  6 +++---
 ui/src/pages/config/View.vue    |  4 ++--
 ui/src/pages/container/View.vue |  9 +++++++--
 ui/src/pages/image/View.vue     |  2 +-
 ui/src/pages/network/List.vue   |  4 ++--
 ui/src/pages/network/New.vue    |  4 ++--
 ui/src/pages/network/View.vue   |  6 ++++--
 ui/src/pages/node/Edit.vue      |  4 ++--
 ui/src/pages/node/List.vue      |  2 +-
 ui/src/pages/node/View.vue      |  6 +++---
 ui/src/pages/registry/Edit.vue  |  4 ++--
 ui/src/pages/registry/List.vue  |  4 ++--
 ui/src/pages/registry/View.vue  |  4 ++--
 ui/src/pages/secret/Edit.vue    |  4 ++--
 ui/src/pages/secret/List.vue    | 11 ++++++-----
 ui/src/pages/secret/View.vue    |  4 ++--
 ui/src/pages/service/List.vue   |  6 +++---
 ui/src/pages/service/View.vue   |  6 +++---
 ui/src/pages/stack/Edit.vue     |  4 ++--
 ui/src/pages/stack/List.vue     |  8 +++++---
 ui/src/pages/stack/View.vue     |  4 ++--
 ui/src/pages/task/View.vue      |  2 +-
 ui/src/pages/volume/New.vue     |  4 ++--
 ui/src/pages/volume/View.vue    |  2 +-
 26 files changed, 68 insertions(+), 58 deletions(-)

diff --git a/ui/src/pages/Home.vue b/ui/src/pages/Home.vue
index ed2594e..3e62bcc 100644
--- a/ui/src/pages/Home.vue
+++ b/ui/src/pages/Home.vue
@@ -6,7 +6,7 @@
           <template #icon>
             <server-outline />
           </template>
-          <x-anchor url="/swarm/nodes">{{ summary.nodeCount }}</x-anchor>
+          <x-anchor :url="{ name: 'node_list' }">{{ summary.nodeCount }}</x-anchor>
         </x-statistic>
       </n-gi>
       <n-gi>
@@ -14,7 +14,7 @@
           <template #icon>
             <globe-outline />
           </template>
-          <x-anchor url="/swarm/networks">{{ summary.networkCount }}</x-anchor>
+          <x-anchor :url="{ name: 'network_list' }">{{ summary.networkCount }}</x-anchor>
         </x-statistic>
       </n-gi>
       <n-gi>
@@ -22,7 +22,7 @@
           <template #icon>
             <image-outline />
           </template>
-          <x-anchor url="/swarm/services">{{ summary.serviceCount }}</x-anchor>
+          <x-anchor :url="{ name: 'service_list' }">{{ summary.serviceCount }}</x-anchor>
         </x-statistic>
       </n-gi>
       <n-gi>
@@ -30,7 +30,7 @@
           <template #icon>
             <albums-outline />
           </template>
-          <x-anchor url="/swarm/stacks">{{ summary.stackCount }}</x-anchor>
+          <x-anchor :url="{ name: 'stack_list' }">{{ summary.stackCount }}</x-anchor>
         </x-statistic>
       </n-gi>
       <!-- <n-gi>
diff --git a/ui/src/pages/config/Edit.vue b/ui/src/pages/config/Edit.vue
index bb3b451..4413ea4 100644
--- a/ui/src/pages/config/Edit.vue
+++ b/ui/src/pages/config/Edit.vue
@@ -1,7 +1,7 @@
 <template>
   <x-page-header :subtitle="model.name">
     <template #action>
-      <n-button secondary size="small" @click="$router.push('/swarm/configs')">
+      <n-button secondary size="small" @click="$router.push({ name: 'config_list' })">
         <template #icon>
           <n-icon>
             <back-icon />
@@ -108,7 +108,7 @@ const rules: any = {
 const form = ref();
 const { submit, submiting } = useForm(form, () => configApi.save(model.value), () => {
   window.message.info(t('texts.action_success'));
-  router.push("/swarm/configs")
+  router.push({ name: 'config_list' })
 })
 
 function newPair() {
diff --git a/ui/src/pages/config/List.vue b/ui/src/pages/config/List.vue
index 1087dfd..fc5fcf0 100644
--- a/ui/src/pages/config/List.vue
+++ b/ui/src/pages/config/List.vue
@@ -1,7 +1,7 @@
 <template>
   <x-page-header>
     <template #action>
-      <n-button secondary size="small" @click="$router.push('/swarm/configs/new')">
+      <n-button secondary size="small" @click="$router.push({ name: 'config_new' })">
         <template #icon>
           <n-icon>
             <add-icon />
@@ -59,7 +59,7 @@ const columns = [
     title: t('fields.id'),
     key: "id",
     fixed: "left" as const,
-    render: (c: Config) => renderLink(`/swarm/configs/${c.id}`, c.id),
+    render: (c: Config) => renderLink({ name: 'config_detail', params: { id: c.id } }, c.id),
   },
   {
     title: t('fields.name'),
@@ -87,7 +87,7 @@ const columns = [
         {
           type: 'warning',
           text: t('buttons.edit'),
-          action: () => router.push(`/swarm/configs/${c.id}/edit`),
+          action: () => router.push({ name: 'config_edit', params: { id: c.id } }),
         },
       ])
     },
diff --git a/ui/src/pages/config/View.vue b/ui/src/pages/config/View.vue
index 021fc3c..9366a17 100644
--- a/ui/src/pages/config/View.vue
+++ b/ui/src/pages/config/View.vue
@@ -1,7 +1,7 @@
 <template>
   <x-page-header :subtitle="model.name || model.id">
     <template #action>
-      <n-button secondary size="small" @click="$router.push('/swarm/configs')">
+      <n-button secondary size="small" @click="$router.push({ name: 'config_list' })">
         <template #icon>
           <n-icon>
             <back-icon />
@@ -12,7 +12,7 @@
       <n-button
         secondary
         size="small"
-        @click="$router.push(`/swarm/configs/${model.id}/edit`)"
+        @click="$router.push({ name: 'config_edit', params: { id: model.id } })"
       >{{ t('buttons.edit') }}</n-button>
     </template>
   </x-page-header>
diff --git a/ui/src/pages/container/View.vue b/ui/src/pages/container/View.vue
index a8aaf0c..99fc36f 100644
--- a/ui/src/pages/container/View.vue
+++ b/ui/src/pages/container/View.vue
@@ -1,7 +1,7 @@
 <template>
   <x-page-header :subtitle="model.name">
     <template #action>
-      <n-button secondary size="small" @click="$router.push('/local/containers')">
+      <n-button secondary size="small" @click="$router.push({ name: 'container_list' })">
         <template #icon>
           <n-icon>
             <back-icon />
@@ -52,7 +52,12 @@
         <x-code :code="raw" language="json" />
       </n-tab-pane>
       <n-tab-pane name="logs" :tab="t('fields.logs')" display-directive="show:lazy">
-        <x-logs type="container" :node="node" :id="model.id" v-if="store.getters.allow('container.logs')"></x-logs>
+        <x-logs
+          type="container"
+          :node="node"
+          :id="model.id"
+          v-if="store.getters.allow('container.logs')"
+        ></x-logs>
         <n-alert type="info" v-else>{{ t('texts.403') }}</n-alert>
       </n-tab-pane>
       <n-tab-pane name="exec" :tab="t('fields.execute')" display-directive="show:lazy">
diff --git a/ui/src/pages/image/View.vue b/ui/src/pages/image/View.vue
index b67a69e..4036a73 100644
--- a/ui/src/pages/image/View.vue
+++ b/ui/src/pages/image/View.vue
@@ -1,7 +1,7 @@
 <template>
   <x-page-header :subtitle="model.id">
     <template #action>
-      <n-button secondary size="small" @click="$router.push('/local/images')">
+      <n-button secondary size="small" @click="$router.push({ name: 'image_list' })">
         <template #icon>
           <n-icon>
             <back-icon />
diff --git a/ui/src/pages/network/List.vue b/ui/src/pages/network/List.vue
index 94ff8bd..a49ddc6 100644
--- a/ui/src/pages/network/List.vue
+++ b/ui/src/pages/network/List.vue
@@ -1,7 +1,7 @@
 <template>
   <x-page-header :subtitle="t('texts.records', { total: model.length }, model.length)">
     <template #action>
-      <n-button secondary size="small" @click="$router.push('/swarm/networks/new')">
+      <n-button secondary size="small" @click="$router.push({ name: 'network_new' })">
         <template #icon>
           <n-icon>
             <add-icon />
@@ -25,7 +25,7 @@
       <tbody>
         <tr v-for="(r, index) of model" :key="r.name">
           <td>
-            <x-anchor :url="`/swarm/networks/${r.name}`">{{ r.name }}</x-anchor>
+            <x-anchor :url="{ name: 'network_detail', params: { name: r.name } }">{{ r.name }}</x-anchor>
           </td>
           <td>{{ r.id }}</td>
           <td>
diff --git a/ui/src/pages/network/New.vue b/ui/src/pages/network/New.vue
index 78fc3af..c83810f 100644
--- a/ui/src/pages/network/New.vue
+++ b/ui/src/pages/network/New.vue
@@ -1,7 +1,7 @@
 <template>
   <x-page-header>
     <template #action>
-      <n-button secondary size="small" @click="$router.push('/swarm/networks')">
+      <n-button secondary size="small" @click="$router.push({ name: 'network_list' })">
         <template #icon>
           <n-icon>
             <back-icon />
@@ -152,7 +152,7 @@ const rules: any = {
 const form = ref();
 const { submit, submiting } = useForm(form, () => networkApi.save(model.value), () => {
   window.message.info(t('texts.action_success'));
-  router.push("/swarm/networks")
+  router.push({ name: 'network_list' })
 })
 
 function newConfig() {
diff --git a/ui/src/pages/network/View.vue b/ui/src/pages/network/View.vue
index cc2d6b2..548be6c 100644
--- a/ui/src/pages/network/View.vue
+++ b/ui/src/pages/network/View.vue
@@ -1,7 +1,7 @@
 <template>
   <x-page-header :subtitle="model.name">
     <template #action>
-      <n-button secondary size="small" @click="$router.push('/swarm/networks')">
+      <n-button secondary size="small" @click="$router.push({ name: 'network_list' })">
         <template #icon>
           <n-icon>
             <back-icon />
@@ -129,7 +129,9 @@
               <tbody>
                 <tr v-for="c in model.containers">
                   <td>
-                    <x-anchor :url="`/local/containers/${c.id}`">{{ c.name }}</x-anchor>
+                    <x-anchor
+                      :url="{ name: 'container_detail', params: { node: '-', id: c.id } }"
+                    >{{ c.name }}</x-anchor>
                   </td>
                   <td>{{ c.ipv4 }}</td>
                   <td>{{ c.ipv6 }}</td>
diff --git a/ui/src/pages/node/Edit.vue b/ui/src/pages/node/Edit.vue
index d0d4c72..8336153 100644
--- a/ui/src/pages/node/Edit.vue
+++ b/ui/src/pages/node/Edit.vue
@@ -1,7 +1,7 @@
 <template>
   <x-page-header :subtitle="model.name ?? model.hostname">
     <template #action>
-      <n-button secondary size="small" @click="$router.push('/swarm/nodes')">
+      <n-button secondary size="small" @click="$router.push({ name: 'node_list' })">
         <template #icon>
           <n-icon>
             <back-icon />
@@ -98,7 +98,7 @@ const model = ref({} as Node);
 const form = ref();
 const { submit, submiting } = useForm(form, () => nodeApi.save(model.value), () => {
   window.message.info(t('texts.action_success'));
-  router.push("/swarm/nodes")
+  router.push({ name: 'node_list' })
 })
 
 function newLabel() {
diff --git a/ui/src/pages/node/List.vue b/ui/src/pages/node/List.vue
index 8f32c09..7603415 100644
--- a/ui/src/pages/node/List.vue
+++ b/ui/src/pages/node/List.vue
@@ -17,7 +17,7 @@
       <tbody>
         <tr v-for="(r, index) of model" :key="r.id">
           <td>
-            <x-anchor :url="`/swarm/nodes/${r.id}`">{{ r.name || r.hostname }}</x-anchor>
+            <x-anchor :url="{ name: 'node_detail', params: { id: r.id } }">{{ r.name || r.hostname }}</x-anchor>
           </td>
           <td>
             <n-tag
diff --git a/ui/src/pages/node/View.vue b/ui/src/pages/node/View.vue
index 9d83b39..d930de5 100644
--- a/ui/src/pages/node/View.vue
+++ b/ui/src/pages/node/View.vue
@@ -1,7 +1,7 @@
 <template>
   <x-page-header :subtitle="node.name ?? node.hostname">
     <template #action>
-      <n-button secondary size="small" @click="$router.push('/swarm/nodes')">
+      <n-button secondary size="small" @click="$router.push({ name: 'node_list' })">
         <template #icon>
           <n-icon>
             <back-icon />
@@ -12,7 +12,7 @@
       <n-button
         secondary
         size="small"
-        @click="$router.push(`/swarm/nodes/${node.id}/edit`)"
+        @click="$router.push({ name: 'node_edit', params: { id: node.id } })"
       >{{ t('buttons.edit') }}</n-button>
     </template>
   </x-page-header>
@@ -91,7 +91,7 @@
               <tbody>
                 <tr v-for="t in tasks">
                   <td>
-                    <x-anchor :url="`/swarm/tasks/${t.id}`">{{ t.id }}</x-anchor>
+                    <x-anchor :url="{ name: 'task_detail', params: { id: t.id } }">{{ t.id }}</x-anchor>
                   </td>
                   <td>
                     <n-tag
diff --git a/ui/src/pages/registry/Edit.vue b/ui/src/pages/registry/Edit.vue
index 1c49b9b..843dee6 100644
--- a/ui/src/pages/registry/Edit.vue
+++ b/ui/src/pages/registry/Edit.vue
@@ -1,7 +1,7 @@
 <template>
   <x-page-header :subtitle="model.name">
     <template #action>
-      <n-button secondary size="small" @click="$router.push('/swarm/registries')">
+      <n-button secondary size="small" @click="$router.push({ name: 'registry_list' })">
         <template #icon>
           <n-icon>
             <back-icon />
@@ -81,7 +81,7 @@ const rules: any = {
 };
 const { submit, submiting } = useForm(form, () => registryApi.save(model.value), () => {
   window.message.info(t('texts.action_success'));
-  router.push("/swarm/registries")
+  router.push({ name: 'registry_list' })
 })
 
 async function fetchData() {
diff --git a/ui/src/pages/registry/List.vue b/ui/src/pages/registry/List.vue
index c93288f..af92418 100644
--- a/ui/src/pages/registry/List.vue
+++ b/ui/src/pages/registry/List.vue
@@ -1,7 +1,7 @@
 <template>
   <x-page-header :subtitle="t('texts.records', { total: model.length }, model.length)">
     <template #action>
-      <n-button secondary size="small" @click="$router.push('/swarm/registries/new')">
+      <n-button secondary size="small" @click="$router.push({ name: 'registry_new' })">
         <template #icon>
           <n-icon>
             <add-icon />
@@ -26,7 +26,7 @@
       <tbody>
         <tr v-for="(r, index) of model" :key="r.id">
           <td>
-            <x-anchor :url="`/swarm/registries/${r.id}`">{{ r.name }}</x-anchor>
+            <x-anchor :url="{ name: 'registry_detail', params: { id: r.id } }">{{ r.name }}</x-anchor>
           </td>
           <td>{{ r.url }}</td>
           <td>{{ r.username }}</td>
diff --git a/ui/src/pages/registry/View.vue b/ui/src/pages/registry/View.vue
index 52888c5..3af1e29 100644
--- a/ui/src/pages/registry/View.vue
+++ b/ui/src/pages/registry/View.vue
@@ -1,7 +1,7 @@
 <template>
   <x-page-header :subtitle="model.name">
     <template #action>
-      <n-button secondary size="small" @click="$router.push('/swarm/registries')">
+      <n-button secondary size="small" @click="$router.push({ name: 'registry_list' })">
         <template #icon>
           <n-icon>
             <back-icon />
@@ -12,7 +12,7 @@
       <n-button
         secondary
         size="small"
-        @click="$router.push(`/swarm/registries/${model.id}/edit`)"
+        @click="$router.push({ name: 'registry_edit', params: { id: model.id } })"
       >{{ t('buttons.edit') }}</n-button>
     </template>
   </x-page-header>
diff --git a/ui/src/pages/secret/Edit.vue b/ui/src/pages/secret/Edit.vue
index 66a1627..452d2d4 100644
--- a/ui/src/pages/secret/Edit.vue
+++ b/ui/src/pages/secret/Edit.vue
@@ -1,7 +1,7 @@
 <template>
   <x-page-header :subtitle="model.name">
     <template #action>
-      <n-button secondary size="small" @click="$router.push('/swarm/secrets')">
+      <n-button secondary size="small" @click="$router.push({ name: 'secret_list' })">
         <template #icon>
           <n-icon>
             <back-icon />
@@ -129,7 +129,7 @@ const rules: any = {
 const form = ref();
 const { submit, submiting } = useForm(form, () => secretApi.save(model.value), () => {
   window.message.info(t('texts.action_success'));
-  router.push("/swarm/secrets")
+  router.push({ name: 'secret_list' })
 })
 
 function newPair() {
diff --git a/ui/src/pages/secret/List.vue b/ui/src/pages/secret/List.vue
index ff6b480..3e8a8d1 100644
--- a/ui/src/pages/secret/List.vue
+++ b/ui/src/pages/secret/List.vue
@@ -1,12 +1,13 @@
 <template>
   <x-page-header>
     <template #action>
-      <n-button secondary size="small" @click="$router.push('/swarm/secrets/new')">
+      <n-button secondary size="small" @click="$router.push({ name: 'secret_new' })">
         <template #icon>
           <n-icon>
             <add-icon />
           </n-icon>
-        </template>{{ t('buttons.new') }}
+        </template>
+        {{ t('buttons.new') }}
       </n-button>
     </template>
   </x-page-header>
@@ -59,7 +60,7 @@ const columns = [
     title: t('fields.id'),
     key: "id",
     fixed: "left" as const,
-    render: (c: Secret) => renderLink(`/swarm/secrets/${c.id}`, c.id),
+    render: (c: Secret) => renderLink({ name: 'secret_detail', params: { id: c.id } }, c.id),
   },
   {
     title: t('fields.name'),
@@ -82,12 +83,12 @@ const columns = [
           type: 'error',
           text: t('buttons.delete'),
           action: () => deleteSecret(c.id, index),
-          prompt:  t('prompts.delete'),
+          prompt: t('prompts.delete'),
         },
         {
           type: 'warning',
           text: t('buttons.edit'),
-          action: () => router.push(`/swarm/secrets/${c.id}/edit`),
+          action: () => router.push({ name: 'secret_edit', params: { id: c.id } }),
         },
       ])
     },
diff --git a/ui/src/pages/secret/View.vue b/ui/src/pages/secret/View.vue
index 5cee639..1622d54 100644
--- a/ui/src/pages/secret/View.vue
+++ b/ui/src/pages/secret/View.vue
@@ -1,7 +1,7 @@
 <template>
   <x-page-header :subtitle="model.name || model.id">
     <template #action>
-      <n-button secondary size="small" @click="$router.push('/swarm/secrets')">
+      <n-button secondary size="small" @click="$router.push({ name: 'secret_list' })">
         <template #icon>
           <n-icon>
             <back-icon />
@@ -12,7 +12,7 @@
       <n-button
         secondary
         size="small"
-        @click="$router.push(`/swarm/secrets/${model.id}/edit`)"
+        @click="$router.push({ name: 'secret_edit', params: { id: model.id } })"
       >{{ t('buttons.edit') }}</n-button>
     </template>
   </x-page-header>
diff --git a/ui/src/pages/service/List.vue b/ui/src/pages/service/List.vue
index 8644a76..8ba5bf1 100644
--- a/ui/src/pages/service/List.vue
+++ b/ui/src/pages/service/List.vue
@@ -1,7 +1,7 @@
 <template>
   <x-page-header>
     <template #action>
-      <n-button secondary size="small" @click="$router.push('/swarm/services/new')">
+      <n-button secondary size="small" @click="$router.push({ name: 'service_new' })">
         <template #icon>
           <n-icon>
             <add-icon />
@@ -75,7 +75,7 @@ const columns = [
     title: t('fields.name'),
     key: "name",
     fixed: "left" as const,
-    render: (s: Service) => renderLink(`/swarm/services/${s.name}`, s.name),
+    render: (s: Service) => renderLink({ name: 'service_detail', params: { name: s.name } }, s.name),
   },
   {
     title: t('objects.image'),
@@ -112,7 +112,7 @@ const columns = [
         {
           type: 'warning',
           text: t('buttons.edit'),
-          action: () => router.push(`/swarm/services/${s.name}/edit`),
+          action: () => router.push({ name: 'service_edit', params: { name: s.name } }),
         },
       ])
     },
diff --git a/ui/src/pages/service/View.vue b/ui/src/pages/service/View.vue
index 2e79c78..5c56e38 100644
--- a/ui/src/pages/service/View.vue
+++ b/ui/src/pages/service/View.vue
@@ -1,7 +1,7 @@
 <template>
   <x-page-header :subtitle="service.name">
     <template #action>
-      <n-button secondary size="small" @click="$router.push('/swarm/services')">
+      <n-button secondary size="small" @click="$router.push({ name: 'service_list' })">
         <template #icon>
           <n-icon>
             <back-icon />
@@ -21,7 +21,7 @@
       <n-button
         secondary
         size="small"
-        @click="$router.push(`/swarm/services/${service.name}/edit`)"
+        @click="$router.push({ name: 'service_edit', params: { name: service.name } })"
       >{{ t('buttons.edit') }}</n-button>
     </template>
   </x-page-header>
@@ -123,7 +123,7 @@
                 <tr v-for="label in service.endpoint?.vips">
                   <td>
                     <x-anchor
-                      :url="`/swarm/networks/${label.name || label.id}`"
+                      :url="{ name: 'network_detail', params: { name: label.name || label.id } }"
                     >{{ label.name || label.id }}</x-anchor>
                   </td>
                   <td>{{ label.ip }}</td>
diff --git a/ui/src/pages/stack/Edit.vue b/ui/src/pages/stack/Edit.vue
index ec9430b..639f71e 100644
--- a/ui/src/pages/stack/Edit.vue
+++ b/ui/src/pages/stack/Edit.vue
@@ -1,7 +1,7 @@
 <template>
   <x-page-header :subtitle="model.name">
     <template #action>
-      <n-button secondary size="small" @click="$router.push('/swarm/stacks')">
+      <n-button secondary size="small" @click="$router.push({ name: 'stack_list' })">
         <template #icon>
           <n-icon>
             <back-icon />
@@ -130,7 +130,7 @@ async function submit(e: Event) {
     try {
       await stackApi.save(model.value)
       window.message.info(t('texts.action_success'));
-      router.push("/swarm/stacks")
+      router.push({ name: 'stack_list' })
     } finally {
       submiting.value = false;
     }
diff --git a/ui/src/pages/stack/List.vue b/ui/src/pages/stack/List.vue
index cc5e9a2..964f0b0 100644
--- a/ui/src/pages/stack/List.vue
+++ b/ui/src/pages/stack/List.vue
@@ -1,7 +1,7 @@
 <template>
   <x-page-header>
     <template #action>
-      <n-button secondary size="small" @click="$router.push('/swarm/stacks/new')">
+      <n-button secondary size="small" @click="$router.push({ name: 'stack_new' })">
         <template #icon>
           <n-icon>
             <add-icon />
@@ -29,12 +29,14 @@
       <tbody>
         <tr v-for="(r, index) of model" :key="r.name">
           <td>
-            <x-anchor :url="`/swarm/stacks/${r.name}`">{{ r.name }}</x-anchor>
+            <x-anchor :url="{ name: 'stack_detail', params: { name: r.name } }">{{ r.name }}</x-anchor>
           </td>
           <td>
             <n-space :size="4" v-if="r.services && r.services.length">
               <n-tag size="small" type="primary" v-for="s in r.services">
-                <x-anchor :url="`/swarm/services/${s}`">{{ s.substring(r.name.length + 1) }}</x-anchor>
+                <x-anchor
+                  :url="{ name: 'service_detail', params: { name: s } }"
+                >{{ s.substring(r.name.length + 1) }}</x-anchor>
               </n-tag>
             </n-space>
           </td>
diff --git a/ui/src/pages/stack/View.vue b/ui/src/pages/stack/View.vue
index 7fda19e..d6be08a 100644
--- a/ui/src/pages/stack/View.vue
+++ b/ui/src/pages/stack/View.vue
@@ -1,7 +1,7 @@
 <template>
   <x-page-header :subtitle="model.name || model.id">
     <template #action>
-      <n-button secondary size="small" @click="$router.push('/swarm/stacks')">
+      <n-button secondary size="small" @click="$router.push({ name: 'stack_list' })">
         <template #icon>
           <n-icon>
             <back-icon />
@@ -12,7 +12,7 @@
       <n-button
         secondary
         size="small"
-        @click="$router.push(`/swarm/stacks/${model.name}/edit`)"
+        @click="$router.push({ name: 'stack_edit', params: { name: model.name } })"
       >{{ t('buttons.edit') }}</n-button>
     </template>
   </x-page-header>
diff --git a/ui/src/pages/task/View.vue b/ui/src/pages/task/View.vue
index 69b15d2..6cc54e7 100644
--- a/ui/src/pages/task/View.vue
+++ b/ui/src/pages/task/View.vue
@@ -1,7 +1,7 @@
 <template>
   <x-page-header :subtitle="model.name || model.id">
     <template #action>
-      <n-button secondary size="small" @click="$router.push('/swarm/tasks')">
+      <n-button secondary size="small" @click="$router.push({ name: 'task_list' })">
         <template #icon>
           <n-icon>
             <back-icon />
diff --git a/ui/src/pages/volume/New.vue b/ui/src/pages/volume/New.vue
index 659e4ce..92f98be 100644
--- a/ui/src/pages/volume/New.vue
+++ b/ui/src/pages/volume/New.vue
@@ -1,7 +1,7 @@
 <template>
   <x-page-header>
     <template #action>
-      <n-button secondary size="small" @click="$router.push('/local/volumes')">
+      <n-button secondary size="small" @click="$router.push({ name: 'volume_list' })">
         <template #icon>
           <n-icon>
             <back-icon />
@@ -103,7 +103,7 @@ const rules: any = {
 const form = ref();
 const { submit, submiting } = useForm(form, () => volumeApi.save(model.value), () => {
   window.message.info(t('texts.action_success'));
-  router.push("/local/volumes")
+  router.push({ name: 'volume_list' })
 })
 
 function newPair() {
diff --git a/ui/src/pages/volume/View.vue b/ui/src/pages/volume/View.vue
index 93577ef..4ddc9fd 100644
--- a/ui/src/pages/volume/View.vue
+++ b/ui/src/pages/volume/View.vue
@@ -1,7 +1,7 @@
 <template>
   <x-page-header :subtitle="model.name">
     <template #action>
-      <n-button size="small" @click="$router.push('/local/volumes')">
+      <n-button size="small" @click="$router.push({ name: 'volume_list' })">
         <template #icon>
           <n-icon>
             <back-icon />