release: update 3.4.0

chore: update
Refactor/tags (#332 )
2025-11-03 13:44:47 +08:00 · 2022-08-22 17:21:18 +08:00 · 2022-08-22 16:16:17 +08:00 · 2022-08-22 15:49:29 +08:00 · 2022-08-22 10:19:10 +08:00 · 2022-08-21 10:49:27 +08:00
41 changed files with 687 additions and 658 deletions
--- a/CHANGELOG.en_US.md
+++ b/CHANGELOG.en_US.md
@@ -1,3 +1,11 @@
+# 3.4.0 (2022-8-22)
+
+### 🍏 Perf
+
+- Optimized routing
+- Optimized for mobile compatibility
+- Optimized routing parameters (`query`, `params` way to refresh the page does not need to open the tab page cache, the parameters can be retained on the `url` and `tab page`)
+
 # 3.3.5 (2022-8-19)

 ### 🎫 Feat
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,11 @@
+# 3.4.0 (2022-8-22)
+
+### 🍏 Perf
+
+- Optimized routing
+- Optimized for mobile compatibility
+- Optimized routing parameters (`query`, `params` way to refresh the page does not need to open the tab page cache, the parameters can be retained on the `url` and `tab page`)
+
 # 3.3.5 (2022-8-19)

 ### 🎫 Feat
--- a/CHANGELOG.zh_CN.md
+++ b/CHANGELOG.zh_CN.md
@@ -1,3 +1,11 @@
+# 3.4.0 (2022-8-22)
+
+### 🍏 Perf
+
+- 优化路由
+- 优化移动端兼容性
+- 优化路由传参（`query`、`params` 方式刷新页面不需要再开启标签页缓存也能保留参数在`url`和`标签页`上）
+
 # 3.3.5 (2022-8-19)

 ### 🎫 Feat
--- a/index.html
+++ b/index.html
@@ -2,9 +2,14 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="renderer" content="webkit" />
+    <meta
+      name="viewport"
+      content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
+    />
    <title>vue-pure-admin</title>
+    <link rel="icon" href="/favicon.ico" />
    <script>
      window.process = {};
    </script>
--- a/mock/asyncRoutes.ts
+++ b/mock/asyncRoutes.ts
@@ -4,8 +4,6 @@ import { MockMethod } from "vite-plugin-mock";
 // http://mockjs.com/examples.html#Object
 const systemRouter = {
  path: "/system",
-  name: "User",
-  redirect: "/system/user/index",
  meta: {
    icon: "setting",
    title: "menus.hssysManagement",
@@ -51,8 +49,6 @@ const systemRouter = {

 const permissionRouter = {
  path: "/permission",
-  redirect: "/permission/page/index",
-  name: "PermissionPage",
  meta: {
    title: "menus.permission",
    icon: "lollipop",
@@ -79,8 +75,6 @@ const permissionRouter = {

 const frameRouter = {
  path: "/iframe",
-  name: "FramePure",
-  redirect: "/iframe/pure",
  meta: {
    icon: "monitor",
    title: "menus.hsExternalPage",
@@ -115,8 +109,6 @@ const frameRouter = {

 const tabsRouter = {
  path: "/tabs",
-  redirect: "/tabs/index",
-  name: "Tabs",
  meta: {
    icon: "IF-team-icontabs",
    title: "menus.hstabs",
@@ -131,13 +123,19 @@ const tabsRouter = {
      }
    },
    {
-      path: "/tabs/detail",
-      name: "TabDetail",
+      path: "/tabs/query-detail",
+      name: "TabQueryDetail",
      meta: {
-        title: "",
-        showLink: false,
-        dynamicLevel: 3,
-        refreshRedirect: "/tabs/index"
+        // 不在menu菜单中显示
+        showLink: false
+      }
+    },
+    {
+      path: "/tabs/params-detail/:id",
+      component: "params-detail",
+      name: "TabParamsDetail",
+      meta: {
+        showLink: false
      }
    }
  ]
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "vue-pure-admin",
-  "version": "3.3.5",
+  "version": "3.4.0",
  "private": true,
  "scripts": {
    "dev": "cross-env --max_old_space_size=4096 vite",
@@ -49,7 +49,7 @@
    "dayjs": "^1.11.4",
    "driver.js": "^0.9.8",
    "echarts": "^5.3.3",
-    "element-plus": "^2.2.13",
+    "element-plus": "^2.2.14",
    "element-resize-detector": "^1.2.3",
    "js-cookie": "^3.0.1",
    "jsbarcode": "^3.11.5",
@@ -143,9 +143,9 @@
    "stylelint-config-standard": "^24.0.0",
    "stylelint-order": "^5.0.0",
    "typescript": "^4.7.4",
-    "unocss": "^0.45.8",
+    "unocss": "^0.45.9",
    "unplugin-vue-define-options": "^0.7.3",
-    "vite": "^3.0.8",
+    "vite": "^3.0.9",
    "vite-plugin-mock": "^2.9.6",
    "vite-plugin-remove-console": "^1.1.0",
    "vite-svg-loader": "^3.4.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -57,7 +57,7 @@ specifiers:
  dayjs: ^1.11.4
  driver.js: ^0.9.8
  echarts: ^5.3.3
-  element-plus: ^2.2.13
+  element-plus: ^2.2.14
  element-resize-detector: ^1.2.3
  eslint: ^8.8.0
  eslint-plugin-prettier: ^4.0.0
@@ -100,10 +100,10 @@ specifiers:
  stylelint-order: ^5.0.0
  swiper: ^8.3.2
  typescript: ^4.7.4
-  unocss: ^0.45.8
+  unocss: ^0.45.9
  unplugin-vue-define-options: ^0.7.3
  v-contextmenu: 3.0.0
-  vite: ^3.0.8
+  vite: ^3.0.9
  vite-plugin-mock: ^2.9.6
  vite-plugin-remove-console: ^1.1.0
  vite-svg-loader: ^3.4.0
@@ -145,7 +145,7 @@ dependencies:
  dayjs: 1.11.5
  driver.js: 0.9.8
  echarts: 5.3.3
-  element-plus: 2.2.13_vue@3.2.37
+  element-plus: 2.2.14_vue@3.2.37
  element-resize-detector: 1.2.4
  js-cookie: 3.0.1
  jsbarcode: 3.11.5
@@ -192,7 +192,7 @@ devDependencies:
  "@iconify-icons/ri": 1.2.3
  "@iconify-icons/uil": 1.2.2
  "@iconify/vue": 3.2.1_vue@3.2.37
-  "@intlify/vite-plugin-vue-i18n": 6.0.1_vite@3.0.8+vue-i18n@9.2.2
+  "@intlify/vite-plugin-vue-i18n": 6.0.1_vite@3.0.9+vue-i18n@9.2.2
  "@pureadmin/theme": 2.4.0
  "@types/element-resize-detector": 1.1.3
  "@types/js-cookie": 3.0.2
@@ -206,9 +206,9 @@ devDependencies:
  "@types/sortablejs": 1.13.0
  "@typescript-eslint/eslint-plugin": 5.33.1_ac9d23a22d787f7b7991fddcc31412d2
  "@typescript-eslint/parser": 5.33.1_eslint@8.22.0+typescript@4.7.4
-  "@vitejs/plugin-legacy": 2.0.1_vite@3.0.8
-  "@vitejs/plugin-vue": 3.0.3_vite@3.0.8+vue@3.2.37
-  "@vitejs/plugin-vue-jsx": 2.0.0_vite@3.0.8+vue@3.2.37
+  "@vitejs/plugin-legacy": 2.0.1_vite@3.0.9
+  "@vitejs/plugin-vue": 3.0.3_vite@3.0.9+vue@3.2.37
+  "@vitejs/plugin-vue-jsx": 2.0.0_vite@3.0.9+vue@3.2.37
  "@vue/eslint-config-prettier": 7.0.0_eslint@8.22.0+prettier@2.7.1
  "@vue/eslint-config-typescript": 10.0.0_c3cdf287d97b2ef58cc8a46e57dc8a9b
  "@vue/runtime-core": 3.2.37
@@ -239,10 +239,10 @@ devDependencies:
  stylelint-config-standard: 24.0.0_stylelint@14.10.0
  stylelint-order: 5.0.0_stylelint@14.10.0
  typescript: 4.7.4
-  unocss: 0.45.8_vite@3.0.8
-  unplugin-vue-define-options: 0.7.3_vite@3.0.8+vue@3.2.37
-  vite: 3.0.8_sass@1.54.4
-  vite-plugin-mock: 2.9.6_mockjs@1.1.0+vite@3.0.8
+  unocss: 0.45.9_vite@3.0.9
+  unplugin-vue-define-options: 0.7.3_vite@3.0.9+vue@3.2.37
+  vite: 3.0.9_sass@1.54.4
+  vite-plugin-mock: 2.9.6_mockjs@1.1.0+vite@3.0.9
  vite-plugin-remove-console: 1.1.0
  vite-svg-loader: 3.4.0
  vue-eslint-parser: 8.3.0_eslint@8.22.0
@@ -1238,7 +1238,7 @@ packages:
    engines: { node: ">= 14" }
    dev: false

-  /@intlify/vite-plugin-vue-i18n/6.0.1_vite@3.0.8+vue-i18n@9.2.2:
+  /@intlify/vite-plugin-vue-i18n/6.0.1_vite@3.0.9+vue-i18n@9.2.2:
    resolution:
      {
        integrity: sha512-FFVcxVU4bR9vdDLNbltM5mrhndnXMErO01i0RrpdyMegEt3Nu/YLoH0sFdjRun7/RY4vaEnhTnFvVf9uO0dQvg==
@@ -1262,7 +1262,7 @@ packages:
      debug: 4.3.4
      fast-glob: 3.2.11
      source-map: 0.6.1
-      vite: 3.0.8_sass@1.54.4
+      vite: 3.0.9_sass@1.54.4
      vue-i18n: 9.2.2_vue@3.2.37
    transitivePeerDependencies:
      - supports-color
@@ -1414,7 +1414,7 @@ packages:
      }
    dependencies:
      "@element-plus/icons-vue": 2.0.9_vue@3.2.37
-      element-plus: 2.2.13_vue@3.2.37
+      element-plus: 2.2.14_vue@3.2.37
      vue: 3.2.37
    transitivePeerDependencies:
      - "@vue/composition-api"
@@ -1426,7 +1426,7 @@ packages:
        integrity: sha512-mJBpMj0YkaqTM5TDz+ek/f8h74qRLhDc/gLJhBq0wpyfCgG++Jd/9i+QUj8gedA5oN8IL6LOSFbcvlGDYxHgkw==
      }
    dependencies:
-      element-plus: 2.2.13_vue@3.2.37
+      element-plus: 2.2.14_vue@3.2.37
      vue: 3.2.37
    transitivePeerDependencies:
      - "@vue/composition-api"
@@ -1853,17 +1853,17 @@ packages:
      eslint-visitor-keys: 3.3.0
    dev: true

-  /@unocss/cli/0.45.8:
+  /@unocss/cli/0.45.9:
    resolution:
      {
-        integrity: sha512-/JyYXi4SsKNkEqB3wG/3FPAOHbQ4YTl0caI8KusMrbNIdGnBHTG9Vi5IzTE7Oyt3yksvwjfgNnOGsiRWBqxq2Q==
+        integrity: sha512-DdSiCbLjmU5GkPKAykIeB/S28uSYWaqkdIMh7aQmg7i3ouCqp61vOeu9eiKoKK2HNm+ivPRznR4drk7zb6d9SA==
      }
    engines: { node: ">=14" }
    hasBin: true
    dependencies:
-      "@unocss/config": 0.45.8
-      "@unocss/core": 0.45.8
-      "@unocss/preset-uno": 0.45.8
+      "@unocss/config": 0.45.9
+      "@unocss/core": 0.45.9
+      "@unocss/preset-uno": 0.45.9
      cac: 6.7.12
      chokidar: 3.5.3
      colorette: 2.0.19
@@ -1873,182 +1873,182 @@ packages:
      perfect-debounce: 0.1.3
    dev: true

-  /@unocss/config/0.45.8:
+  /@unocss/config/0.45.9:
    resolution:
      {
-        integrity: sha512-iwxHS0yuf/tPab8Oij6Q9pjCUASAdUJC31n0rp3VpyexjzfI/335ysbEzrBuwgxLV3RWk7Z1kHizCw+kQwZ+tw==
+        integrity: sha512-+HAtOxxW/BMNSunM7VwoCkCgb6SY8LpiGcfOnkrrynf/cne9RQQdfQPlMjbKLCIneBPtOSJWAKFMrPcVm0QW/w==
      }
    engines: { node: ">=14" }
    dependencies:
-      "@unocss/core": 0.45.8
+      "@unocss/core": 0.45.9
      unconfig: 0.3.5
    dev: true

-  /@unocss/core/0.45.8:
+  /@unocss/core/0.45.9:
    resolution:
      {
-        integrity: sha512-Iskmc1FaxIUAw4HK1U3htvXxJ4YAtffn3+ygNKY8+bzuOqhIk84vbp7SnHV3b8X6IHl4/OYzNRlVFhJQYnWV7g==
+        integrity: sha512-ZUHgE8q7oYNFW+lPyH71n2weR9mhYL4WY/FL6K+sa9mVEYA4Lq15sCKTB+fbowB4CDLxZ8BEGNX3I9Qpn46lHA==
      }
    dev: true

-  /@unocss/inspector/0.45.8:
+  /@unocss/inspector/0.45.9:
    resolution:
      {
-        integrity: sha512-dvGYyVVofH8VxMvqaRfysxIbRkaunvs5M5Z8UVaCCfjfrDX6nqAQfSOakXWODEz8Y2JEfKEDLWfSn+oQWb9ohA==
+        integrity: sha512-/GFt/NG349cs9HnVejQe0T2HUUx8lOIjSP0cgReibWJ2idIuu9NLYPTh1YuT37ygHkze19106/HLu50lGtjAmw==
      }
    dependencies:
      gzip-size: 6.0.0
      sirv: 2.0.2
    dev: true

-  /@unocss/preset-attributify/0.45.8:
+  /@unocss/preset-attributify/0.45.9:
    resolution:
      {
-        integrity: sha512-5j8TfoYWKkpV0f2fwDTtAyRl+2zoquqg5JfuQDr1ELUpSodmHq9hMvt53EmG/S1wotijthsdh8jcjCRLQ36Xuw==
+        integrity: sha512-jIpBx7J3XHg/QBxybU4kZr9io853ifrkcs/QfKgc2DFq+iOQfnIxFuMGJNs7oH2Py86MkX6ZkYuDJ5IlcE+v2A==
      }
    dependencies:
-      "@unocss/core": 0.45.8
+      "@unocss/core": 0.45.9
    dev: true

-  /@unocss/preset-icons/0.45.8:
+  /@unocss/preset-icons/0.45.9:
    resolution:
      {
-        integrity: sha512-2dcK2Z8xMiJoKhgraTyarJioqyh2SglXrvJ+xp7HNDOhwQcbzxdw9JzwBT1hCq03ohm2Z1CdF9xP9nbFqdpY/A==
+        integrity: sha512-Tla5xII9TzLgunOu4sbOshJwif2FYcX1xgql6KeFhL6f37Z6EUiax4TBgPC3GIreleRLhACVP8sZUil3fK2zcA==
      }
    dependencies:
      "@iconify/utils": 1.0.33
-      "@unocss/core": 0.45.8
+      "@unocss/core": 0.45.9
      ohmyfetch: 0.4.18
    transitivePeerDependencies:
      - supports-color
    dev: true

-  /@unocss/preset-mini/0.45.8:
+  /@unocss/preset-mini/0.45.9:
    resolution:
      {
-        integrity: sha512-MWQWt7CR9lqR/2N7dnVQrxxuTxxccL7xj82qb8i2P1qQScyVVdPKTeUozu/oA5HrR0ujh+qjV1iTC8RB5HxbbQ==
+        integrity: sha512-WLBKaE+WYBPbRK4Q3lHDBf8luFElNd0cG4e05Tttg028ImZIhDsPGkGAGLKk5wmA1CiUvG/K976NywOchA9T6A==
      }
    dependencies:
-      "@unocss/core": 0.45.8
+      "@unocss/core": 0.45.9
    dev: true

-  /@unocss/preset-tagify/0.45.8:
+  /@unocss/preset-tagify/0.45.9:
    resolution:
      {
-        integrity: sha512-ePq3HUxPIuQR8MPDtgrzB/dOYGyba2KtCUjp5Zy0EPY4bd31ysz2AixjOOygFQIx5JrnYKs6WxW9PdhwMJUnXg==
+        integrity: sha512-cOjxRp3EWWJSVA69NiqsRdLlB2SFGys4w+44X4UYe0yYHr2L3bJEK66gPj3YLuyiBfmbv5RSv1OaP2a1RHQ1ZA==
      }
    dependencies:
-      "@unocss/core": 0.45.8
+      "@unocss/core": 0.45.9
    dev: true

-  /@unocss/preset-typography/0.45.8:
+  /@unocss/preset-typography/0.45.9:
    resolution:
      {
-        integrity: sha512-x0MyuyPLfwvQenHwVHhLRzhjtuQL9S5qkdGh04kOySprp1wIsu14L6w/zFequvVSk55Tb8s+QMd9TmTYR/MZPg==
+        integrity: sha512-TaHnAZd6UU2qNz0dEqoniBrwEOCpsifZquOK6hFRCj4FKwWWP2VEOgdVclgjL8DDWLZeS4bfTn2zQ5pGfo8tDQ==
      }
    dependencies:
-      "@unocss/core": 0.45.8
+      "@unocss/core": 0.45.9
    dev: true

-  /@unocss/preset-uno/0.45.8:
+  /@unocss/preset-uno/0.45.9:
    resolution:
      {
-        integrity: sha512-WxE9aAHCnmZMwzdhiKYawvyQx1wucl/AsoxTpnNgToARaGLiQiWJCT7ov0VgNndbxD1mfCIA4f9LxNklkFVZzA==
+        integrity: sha512-YqQRPeVDrY7poBUw0tOOD3Vd8QCEmhIjN63MovA0RnEG6NMweMuJ5ahqVarfp3Rrcfycmgya6WWGk6ZOlinl5A==
      }
    dependencies:
-      "@unocss/core": 0.45.8
-      "@unocss/preset-mini": 0.45.8
-      "@unocss/preset-wind": 0.45.8
+      "@unocss/core": 0.45.9
+      "@unocss/preset-mini": 0.45.9
+      "@unocss/preset-wind": 0.45.9
    dev: true

-  /@unocss/preset-web-fonts/0.45.8:
+  /@unocss/preset-web-fonts/0.45.9:
    resolution:
      {
-        integrity: sha512-GvBZrDtAOkyOwphdzT3v1QniJfFssR0LhWfJPBpNsOi3Of2iz8Zq0LisbPF7PEFS0fPicijDcgyVUTj1TK71Ew==
+        integrity: sha512-kWYfUcvRvoPyxmf6q8AZV+cLeVJH6p4tmvDnV9iLckCThYYC+6ADHlnRimv8PJtVvy6hgv46vf0X3ZA4HLSqzg==
      }
    dependencies:
-      "@unocss/core": 0.45.8
+      "@unocss/core": 0.45.9
      ohmyfetch: 0.4.18
    dev: true

-  /@unocss/preset-wind/0.45.8:
+  /@unocss/preset-wind/0.45.9:
    resolution:
      {
-        integrity: sha512-AWupVDOIRswf8CnKkWeBi1G7UBjrigQHewj/VPtnXPP7bqOHY91+4T/iaTtYJ5lrKauYVR4ZndOM1qJGEY09Gg==
+        integrity: sha512-LMlWg8jsUwqlhd6jwtn5QCTzb1et0k7yNIZwyL6Y2AOHW5g5jqaTvKTWVjQpfu9wmlxTTVXDBmaOV3cOiosvuw==
      }
    dependencies:
-      "@unocss/core": 0.45.8
-      "@unocss/preset-mini": 0.45.8
+      "@unocss/core": 0.45.9
+      "@unocss/preset-mini": 0.45.9
    dev: true

-  /@unocss/reset/0.45.8:
+  /@unocss/reset/0.45.9:
    resolution:
      {
-        integrity: sha512-zeIYa/d/amPhX6/del0k6K8/Hdl/nN12XCeiVfBKymlilAjQQyV64V/qdLBtSKzqegT68O/xMscla7pZDto4Hw==
+        integrity: sha512-FiLi3jas0L3CkfdAYXRybRjAjGz9lZQ4+8IglBXKyR9UDnHssNemo5+NGEv7xpsItPm99b/lsMvLnx1JX/As5Q==
      }
    dev: true

-  /@unocss/scope/0.45.8:
+  /@unocss/scope/0.45.9:
    resolution:
      {
-        integrity: sha512-Zf08xhCBqFHCaf8kGwMXu0+JRR3U9v8m7Y2LwUK4zg6LdcfGX9luykPfiNJSsFQ20l7cWBcj2g4tWdzFvIcDMA==
+        integrity: sha512-1JOv+xCYYetofqpfWmBX1kXIqo2n788FRWNPzkbSGaH5qdS9za1+wECBlTiWpbvyfeB4gX88d8+DX9YL4PjVdA==
      }
    dev: true

-  /@unocss/transformer-attributify-jsx/0.45.8:
+  /@unocss/transformer-attributify-jsx/0.45.9:
    resolution:
      {
-        integrity: sha512-tpWr37wXvOPkMuXaTGkjSbKqz4DD2MuxKxzTs+DUQ5H7ABvp/XVnCiHudtgjLzaVAfEZgdybKFUs+xX+RuxnWA==
+        integrity: sha512-QgCuztKpm0jLZhJbEWGrajwT1iURtGXtALBLVdqqM/D5FoFpHpkddOhr5ud+XGoyRhy9E9m9WdfyTq8g97HHgQ==
      }
    dependencies:
-      "@unocss/core": 0.45.8
+      "@unocss/core": 0.45.9
    dev: true

-  /@unocss/transformer-compile-class/0.45.8:
+  /@unocss/transformer-compile-class/0.45.9:
    resolution:
      {
-        integrity: sha512-nYIQbXgc8yyzSYqIrb3+mojFTewOavmYreC+cmsvFhE+q3q5ZpdXNx0hgpkOFQ7Dg5KoPG9aKH+dXFjG33GcmQ==
+        integrity: sha512-x0MWUdTMPndS4AZEwlV+ugDdTYeezEGCC0fKb/jKujF3RMf9m6C8/MZw3eiZ5LNHKU1kfor1NWCTjshXl4pV3Q==
      }
    dependencies:
-      "@unocss/core": 0.45.8
+      "@unocss/core": 0.45.9
    dev: true

-  /@unocss/transformer-directives/0.45.8:
+  /@unocss/transformer-directives/0.45.9:
    resolution:
      {
-        integrity: sha512-das5qyPOXjw7I6eXm6ETrnBQmfwzJo/RGMUkWmed67sYL4tWGLLYu8fOqoIR8vPGc6h5YmFjBGqOOCyX+NDmlg==
+        integrity: sha512-88t2zWFVpYNk3kFBiJWW4oYerbVnyk9smPZD9+HJewPJbvbHm6UboW4rEy3KepT2heyn7GTpLjfLD08yDZFvIA==
      }
    dependencies:
-      "@unocss/core": 0.45.8
+      "@unocss/core": 0.45.9
      css-tree: 2.2.1
    dev: true

-  /@unocss/transformer-variant-group/0.45.8:
+  /@unocss/transformer-variant-group/0.45.9:
    resolution:
      {
-        integrity: sha512-fp1tNBhO3VPxOnzDWZNqrQ1oWngeYUXeJZRl94pdsp+4nWoFrbCXG/nDn7a+Qk223al32B3rO/GLJl7nOpSmRw==
+        integrity: sha512-xB7ygI81u9yVpJvKDo5l03KC0zwJRerpncNxpReDpPGTcpnoYqoazX0CZ/sCekuE3ErZC6UJkyknEuwT+8owog==
      }
    dependencies:
-      "@unocss/core": 0.45.8
+      "@unocss/core": 0.45.9
    dev: true

-  /@unocss/vite/0.45.8_vite@3.0.8:
+  /@unocss/vite/0.45.9_vite@3.0.9:
    resolution:
      {
-        integrity: sha512-uGKe0tbxcJgk9aEKa+AYjbU3i0Yh1N7ekvdLGZD+xwk+EvIOg4Hc8mym5gOOh4wRYKROoVOPp1Z7m+GwCVecAA==
+        integrity: sha512-Wb0JSaO/D8IvXku6+bImr4oobYbFFcqXYAT3QrWTYdCuEZ7Zn6svNN4f1baMvKH5djm7cn9YNL7lroOXN0/m8Q==
      }
    peerDependencies:
      vite: ^2.9.0 || ^3.0.0-0
    dependencies:
      "@ampproject/remapping": 2.2.0
      "@rollup/pluginutils": 4.2.1
-      "@unocss/config": 0.45.8
-      "@unocss/core": 0.45.8
-      "@unocss/inspector": 0.45.8
-      "@unocss/scope": 0.45.8
-      "@unocss/transformer-directives": 0.45.8
+      "@unocss/config": 0.45.9
+      "@unocss/core": 0.45.9
+      "@unocss/inspector": 0.45.9
+      "@unocss/scope": 0.45.9
+      "@unocss/transformer-directives": 0.45.9
      magic-string: 0.26.2
-      vite: 3.0.8_sass@1.54.4
+      vite: 3.0.9_sass@1.54.4
    dev: true

  /@uppy/companion-client/2.2.1:
@@ -2107,7 +2107,7 @@ packages:
      nanoid: 3.3.4
    dev: false

-  /@vitejs/plugin-legacy/2.0.1_vite@3.0.8:
+  /@vitejs/plugin-legacy/2.0.1_vite@3.0.9:
    resolution:
      {
        integrity: sha512-kKC56rfsXwebApzyuZqdQlGmqTyH1ugy0l0rY58gx5OXzq4/t5/DCqGUoz53Db51OqfjRqsHfqmvq9or6w9k/Q==
@@ -2125,10 +2125,10 @@ packages:
      magic-string: 0.26.2
      regenerator-runtime: 0.13.9
      systemjs: 6.12.2
-      vite: 3.0.8_sass@1.54.4
+      vite: 3.0.9_sass@1.54.4
    dev: true

-  /@vitejs/plugin-vue-jsx/2.0.0_vite@3.0.8+vue@3.2.37:
+  /@vitejs/plugin-vue-jsx/2.0.0_vite@3.0.9+vue@3.2.37:
    resolution:
      {
        integrity: sha512-WF9ApZ/ivyyW3volQfu0Td0KNPhcccYEaRNzNY1NxRLVJQLSX0nFqquv3e2g7MF74p1XZK4bGtDL2y5i5O5+1A==
@@ -2142,13 +2142,13 @@ packages:
      "@babel/plugin-syntax-import-meta": 7.10.4_@babel+core@7.18.10
      "@babel/plugin-transform-typescript": 7.18.12_@babel+core@7.18.10
      "@vue/babel-plugin-jsx": 1.1.1_@babel+core@7.18.10
-      vite: 3.0.8_sass@1.54.4
+      vite: 3.0.9_sass@1.54.4
      vue: 3.2.37
    transitivePeerDependencies:
      - supports-color
    dev: true

-  /@vitejs/plugin-vue/3.0.3_vite@3.0.8+vue@3.2.37:
+  /@vitejs/plugin-vue/3.0.3_vite@3.0.9+vue@3.2.37:
    resolution:
      {
        integrity: sha512-U4zNBlz9mg+TA+i+5QPc3N5lQvdUXENZLO2h0Wdzp56gI1MWhqJOv+6R+d4kOzoaSSq6TnGPBdZAXKOe4lXy6g==
@@ -2158,7 +2158,7 @@ packages:
      vite: ^3.0.0
      vue: ^3.2.25
    dependencies:
-      vite: 3.0.8_sass@1.54.4
+      vite: 3.0.9_sass@1.54.4
      vue: 3.2.37
    dev: true

@@ -4150,10 +4150,10 @@ packages:
      }
    dev: true

-  /element-plus/2.2.13_vue@3.2.37:
+  /element-plus/2.2.14_vue@3.2.37:
    resolution:
      {
-        integrity: sha512-dKQ7BPZC8deUPhv+6s4GgOL0GyGj3KpUarywxm6s1nWnHjH6FqeZlUcxPqBvJd7W/d81POayx3B13GP+rfkG9g==
+        integrity: sha512-V5Pis0OHhePg1RgVogZrcefaVl8vjVn4Pn9Qsh/t2CbFgjg9kKOYFqf/tuP3ObSXGm3X89hpe0W+nLVAsaFnpw==
      }
    peerDependencies:
      vue: ^3.2.0
@@ -4164,7 +4164,7 @@ packages:
      "@popperjs/core": /@sxzz/popperjs-es/2.11.7
      "@types/lodash": 4.14.183
      "@types/lodash-es": 4.17.6
-      "@vueuse/core": 8.9.4_vue@3.2.37
+      "@vueuse/core": 9.1.0_vue@3.2.37
      async-validator: 4.2.5
      dayjs: 1.11.5
      escape-html: 1.0.3
@@ -8786,34 +8786,34 @@ packages:
    engines: { node: ">= 10.0.0" }
    dev: true

-  /unocss/0.45.8_vite@3.0.8:
+  /unocss/0.45.9_vite@3.0.9:
    resolution:
      {
-        integrity: sha512-OIStfHtH0sv1MYz0x+fa8wEBuwRS0lFhnlRwo/zxnNSh5zS+szMKeowhXoC/eoOQBUA1qoHux0qG5GdcJnX2Lg==
+        integrity: sha512-f2gTI1cn2/GZRbvSnCaWZa03IdcRnK33AiBtpJoDW61IRNt7lu+D1upCnkKPjcTrDFTmI7DryXGHlG/b8p4wTQ==
      }
    engines: { node: ">=14" }
    peerDependencies:
-      "@unocss/webpack": 0.45.8
+      "@unocss/webpack": 0.45.9
    peerDependenciesMeta:
      "@unocss/webpack":
        optional: true
    dependencies:
-      "@unocss/cli": 0.45.8
-      "@unocss/core": 0.45.8
-      "@unocss/preset-attributify": 0.45.8
-      "@unocss/preset-icons": 0.45.8
-      "@unocss/preset-mini": 0.45.8
-      "@unocss/preset-tagify": 0.45.8
-      "@unocss/preset-typography": 0.45.8
-      "@unocss/preset-uno": 0.45.8
-      "@unocss/preset-web-fonts": 0.45.8
-      "@unocss/preset-wind": 0.45.8
-      "@unocss/reset": 0.45.8
-      "@unocss/transformer-attributify-jsx": 0.45.8
-      "@unocss/transformer-compile-class": 0.45.8
-      "@unocss/transformer-directives": 0.45.8
-      "@unocss/transformer-variant-group": 0.45.8
-      "@unocss/vite": 0.45.8_vite@3.0.8
+      "@unocss/cli": 0.45.9
+      "@unocss/core": 0.45.9
+      "@unocss/preset-attributify": 0.45.9
+      "@unocss/preset-icons": 0.45.9
+      "@unocss/preset-mini": 0.45.9
+      "@unocss/preset-tagify": 0.45.9
+      "@unocss/preset-typography": 0.45.9
+      "@unocss/preset-uno": 0.45.9
+      "@unocss/preset-web-fonts": 0.45.9
+      "@unocss/preset-wind": 0.45.9
+      "@unocss/reset": 0.45.9
+      "@unocss/transformer-attributify-jsx": 0.45.9
+      "@unocss/transformer-compile-class": 0.45.9
+      "@unocss/transformer-directives": 0.45.9
+      "@unocss/transformer-variant-group": 0.45.9
+      "@unocss/vite": 0.45.9_vite@3.0.9
    transitivePeerDependencies:
      - supports-color
      - vite
@@ -8827,7 +8827,7 @@ packages:
    engines: { node: ">= 0.8" }
    dev: true

-  /unplugin-vue-define-options/0.7.3_vite@3.0.8+vue@3.2.37:
+  /unplugin-vue-define-options/0.7.3_vite@3.0.9+vue@3.2.37:
    resolution:
      {
        integrity: sha512-VbexYR8m2v/TLi49+F7Yf3rO2EyS0EkrXjJxqym6W0NxOzom9zdmRUR+av4UAu4GruhMumJc/9ITS1Wj+rozjg==
@@ -8838,7 +8838,7 @@ packages:
    dependencies:
      "@rollup/pluginutils": 4.2.1
      "@vue/compiler-sfc": 3.2.37
-      unplugin: 0.8.1_vite@3.0.8
+      unplugin: 0.8.1_vite@3.0.9
      vue: 3.2.37
    transitivePeerDependencies:
      - esbuild
@@ -8847,7 +8847,7 @@ packages:
      - webpack
    dev: true

-  /unplugin/0.8.1_vite@3.0.8:
+  /unplugin/0.8.1_vite@3.0.9:
    resolution:
      {
        integrity: sha512-o7rUZoPLG1fH4LKinWgb77gDtTE6mw/iry0Pq0Z5UPvZ9+HZ1/4+7fic7t58s8/CGkPrDpGq+RltO+DmswcR4g==
@@ -8869,7 +8869,7 @@ packages:
    dependencies:
      acorn: 8.8.0
      chokidar: 3.5.3
-      vite: 3.0.8_sass@1.54.4
+      vite: 3.0.9_sass@1.54.4
      webpack-sources: 3.2.3
      webpack-virtual-modules: 0.4.4
    dev: true
@@ -8954,7 +8954,7 @@ packages:
      spdx-expression-parse: 3.0.1
    dev: true

-  /vite-plugin-mock/2.9.6_mockjs@1.1.0+vite@3.0.8:
+  /vite-plugin-mock/2.9.6_mockjs@1.1.0+vite@3.0.9:
    resolution:
      {
        integrity: sha512-/Rm59oPppe/ncbkSrUuAxIQihlI2YcBmnbR4ST1RA2VzM1C0tEQc1KlbQvnUGhXECAGTaQN2JyasiwXP6EtKgg==
@@ -8974,7 +8974,7 @@ packages:
      fast-glob: 3.2.11
      mockjs: 1.1.0
      path-to-regexp: 6.2.1
-      vite: 3.0.8_sass@1.54.4
+      vite: 3.0.9_sass@1.54.4
    transitivePeerDependencies:
      - rollup
      - supports-color
@@ -8997,10 +8997,10 @@ packages:
      svgo: 2.8.0
    dev: true

-  /vite/3.0.8_sass@1.54.4:
+  /vite/3.0.9_sass@1.54.4:
    resolution:
      {
-        integrity: sha512-AOZ4eN7mrkJiOLuw8IA7piS4IdOQyQCA81GxGsAQvAZzMRi9ZwGB3TOaYsj4uLAWK46T5L4AfQ6InNGlxX30IQ==
+        integrity: sha512-waYABTM+G6DBTCpYAxvevpG50UOlZuynR0ckTK5PawNVt7ebX6X7wNXHaGIO6wYYFXSM7/WcuFuO2QzhBB6aMw==
      }
    engines: { node: ^14.18.0 || >=16.0.0 }
    hasBin: true
@@ -9076,7 +9076,7 @@ packages:
      ace-builds: 1.9.6
      ant-design-vue: 3.2.11_vue@3.2.37
      core-js: 3.24.1
-      element-plus: 2.2.13_vue@3.2.37
+      element-plus: 2.2.14_vue@3.2.37
      lodash: 4.17.21
      uuid: 8.3.2
      vue: 3.2.37
--- a/public/serverConfig.json
+++ b/public/serverConfig.json
@@ -1,5 +1,5 @@
 {
-  "Version": "3.3.5",
+  "Version": "3.4.0",
  "Title": "PureAdmin",
  "FixedHeader": true,
  "HiddenSideBar": false,
--- a/src/components/ReIcon/src/Select.vue
+++ b/src/components/ReIcon/src/Select.vue
@@ -156,7 +156,7 @@ watch(
            >
              <el-divider class="tab-divider" border-style="dashed" />
              <el-scrollbar height="220px">
-                <ul class="flex flex-wrap px-2 ml-2">
+                <ul class="flex-wrap px-2 ml-2">
                  <li
                    v-for="(item, key) in pageList"
                    :key="key"
--- a/src/components/ReSeamlessScroll/src/index.vue
+++ b/src/components/ReSeamlessScroll/src/index.vue
@@ -428,7 +428,7 @@ function scrollInitMove() {
      if (timer) clearTimeout(timer);
      copyHtml.value = unref(slotList).innerHTML;
      setTimeout(() => {
-        realBoxHeight.value = unref(realBox).offsetHeight;
+        realBoxHeight.value = unref(realBox)?.offsetHeight;
        scrollMove();
      }, 0);
    } else {
@@ -454,7 +454,6 @@ function scrollStopMove() {

 // 鼠标滚轮事件
 function wheel(e) {
-  e.preventDefault();
  if (
    unref(options).direction === "left" ||
    unref(options).direction === "right"
@@ -517,10 +516,10 @@ defineExpose({
      :style="pos"
      @mouseenter="enter"
      @mouseleave="leave"
-      @touchstart="touchStart"
-      @touchmove="touchMove"
+      @touchstart.passive="touchStart"
+      @touchmove.passive="touchMove"
      @touchend="touchEnd"
-      @mousewheel="wheel"
+      @mousewheel.passive="wheel"
    >
      <div :ref="'slotList' + classOption['key']" :style="float">
        <slot />
--- a/src/layout/components/setting/index.vue
+++ b/src/layout/components/setting/index.vue
@@ -12,6 +12,7 @@ import { getConfig } from "/@/config";
 import { useRouter } from "vue-router";
 import panel from "../panel/index.vue";
 import { emitter } from "/@/utils/mitt";
+import { resetRouter } from "/@/router";
 import { templateRef } from "@vueuse/core";
 import { routerArrays } from "/@/layout/types";
 import { useNav } from "/@/layout/hooks/useNav";
@@ -140,6 +141,7 @@ function onReset() {
  useMultiTagsStoreHook().handleTags("equal", [...routerArrays]);
  storageLocal.clear();
  storageSession.clear();
+  resetRouter();
 }

 function onChange(label) {
--- a/src/layout/components/sidebar/breadCrumb.vue
+++ b/src/layout/components/sidebar/breadCrumb.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
 import { isEqual } from "lodash-unified";
 import { transformI18n } from "/@/plugins/i18n";
+import { ref, watch, onMounted, toRaw } from "vue";
 import { getParentPaths, findRouteByPath } from "/@/router/utils";
 import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
 import { useRoute, useRouter, RouteLocationMatched } from "vue-router";
@@ -14,19 +14,24 @@ const multiTags: any = useMultiTagsStoreHook().multiTags;

 const isDashboard = (route: RouteLocationMatched): boolean | string => {
  const name = route && (route.name as string);
-  if (!name) {
-    return false;
-  }
+  if (!name) return false;
  return name.trim().toLocaleLowerCase() === "Welcome".toLocaleLowerCase();
 };

 const getBreadcrumb = (): void => {
  // 当前路由信息
  let currentRoute;
+
  if (Object.keys(route.query).length > 0) {
    multiTags.forEach(item => {
      if (isEqual(route.query, item?.query)) {
-        currentRoute = item;
+        currentRoute = toRaw(item);
+      }
+    });
+  } else if (Object.keys(route.params).length > 0) {
+    multiTags.forEach(item => {
+      if (isEqual(route.params, item?.params)) {
+        currentRoute = toRaw(item);
      }
    });
  } else {
@@ -38,29 +43,12 @@ const getBreadcrumb = (): void => {
  let matched = [];
  // 获取每个父级路径对应的路由信息
  parentRoutes.forEach(path => {
-    if (path !== "/") {
-      matched.push(findRouteByPath(path, routes));
-    }
+    if (path !== "/") matched.push(findRouteByPath(path, routes));
  });
-  if (router.currentRoute.value.meta?.refreshRedirect) {
-    matched.unshift(
-      findRouteByPath(
-        router.currentRoute.value.meta.refreshRedirect as string,
-        routes
-      )
-    );
-  } else {
-    // 过滤与子级相同标题的父级路由
-    matched = matched.filter(item => {
-      return !item.redirect || (item.redirect && item.children.length !== 1);
-    });
-  }
-  if (currentRoute?.path !== "/welcome") {
-    matched.push(currentRoute);
-  }

-  const first = matched[0];
-  if (!isDashboard(first)) {
+  if (currentRoute?.path !== "/welcome") matched.push(currentRoute);
+
+  if (!isDashboard(matched[0])) {
    matched = [
      {
        path: "/welcome",
@@ -70,60 +58,51 @@ const getBreadcrumb = (): void => {
    ].concat(matched);
  }

+  matched.forEach((item, index) => {
+    if (currentRoute?.query || currentRoute?.params) return;
+    if (item?.children) {
+      item.children.forEach(v => {
+        if (v?.meta?.title === item?.meta?.title) {
+          matched.splice(index, 1);
+        }
+      });
+    }
+  });
+
  levelList.value = matched.filter(
    item => item?.meta && item?.meta.title !== false
  );
 };

-getBreadcrumb();
+const handleLink = (item: RouteLocationMatched): void => {
+  const { redirect, path } = item;
+  if (redirect) {
+    router.push(redirect as any);
+  } else {
+    router.push(path);
+  }
+};
+
+onMounted(() => {
+  getBreadcrumb();
+});

 watch(
  () => route.path,
-  () => getBreadcrumb()
-);
-
-watch(
-  () => route.query,
-  () => getBreadcrumb()
-);
-
-const handleLink = (item: RouteLocationMatched): any => {
-  const { redirect, path } = item;
-  if (redirect) {
-    router.push(redirect.toString());
-    return;
+  () => {
+    getBreadcrumb();
  }
-  router.push(path);
-};
+);
 </script>

 <template>
-  <el-breadcrumb class="app-breadcrumb select-none" separator="/">
+  <el-breadcrumb class="!leading-[50px] select-none" separator="/">
    <transition-group appear name="breadcrumb">
-      <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
-        <span
-          v-if="item.redirect === 'noRedirect' || index == levelList.length - 1"
-          class="no-redirect"
-        >
-          {{ transformI18n(item.meta.title) }}
-        </span>
-        <a v-else @click.prevent="handleLink(item)">
+      <el-breadcrumb-item v-for="item in levelList" :key="item.path">
+        <a @click.prevent="handleLink(item)">
          {{ transformI18n(item.meta.title) }}
        </a>
      </el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>
 </template>
-
-<style lang="scss" scoped>
-.app-breadcrumb.el-breadcrumb {
-  display: inline-block;
-  font-size: 14px;
-  line-height: 50px;
-
-  .no-redirect {
-    color: #97a8be;
-    cursor: text;
-  }
-}
-</style>
--- a/src/layout/components/sidebar/horizontal.vue
+++ b/src/layout/components/sidebar/horizontal.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { ref, watch } from "vue";
 import Search from "../search/index.vue";
 import Notice from "../notice/index.vue";
 import SidebarItem from "./sidebarItem.vue";
@@ -9,7 +10,6 @@ import { deviceDetection } from "@pureadmin/utils";
 import { useTranslationLang } from "../../hooks/useTranslationLang";
 import { usePermissionStoreHook } from "/@/store/modules/permission";
 import globalization from "/@/assets/svg/globalization.svg?component";
-import { ref, watch, nextTick, onMounted, onBeforeUnmount } from "vue";

 const menuRef = ref();

@@ -21,7 +21,6 @@ const {
  logout,
  backHome,
  onPanel,
-  handleResize,
  menuSelect,
  username,
  avatarsStyle,
@@ -29,20 +28,6 @@ const {
  getDropdownItemClass
 } = useNav();

-function onResizeMenu() {
-  nextTick(() => {
-    handleResize(menuRef.value);
-  });
-}
-
-onMounted(() => {
-  window.addEventListener("resize", onResizeMenu);
-});
-
-onBeforeUnmount(() => {
-  window.removeEventListener("resize", onResizeMenu);
-});
-
 watch(
  () => route.path,
  () => {
--- a/src/layout/components/sidebar/mixNav.vue
+++ b/src/layout/components/sidebar/mixNav.vue
@@ -6,12 +6,12 @@ import { useNav } from "/@/layout/hooks/useNav";
 import { transformI18n } from "/@/plugins/i18n";
 import screenfull from "../screenfull/index.vue";
 import { deviceDetection } from "@pureadmin/utils";
+import { ref, toRaw, watch, onMounted } from "vue";
 import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
 import { getParentPaths, findRouteByPath } from "/@/router/utils";
 import { useTranslationLang } from "../../hooks/useTranslationLang";
 import { usePermissionStoreHook } from "/@/store/modules/permission";
 import globalization from "/@/assets/svg/globalization.svg?component";
-import { ref, toRaw, watch, nextTick, onMounted, onBeforeUnmount } from "vue";

 const menuRef = ref();
 let defaultActive = ref(null);
@@ -23,7 +23,6 @@ const {
  routers,
  logout,
  onPanel,
-  handleResize,
  menuSelect,
  resolvePath,
  username,
@@ -42,19 +41,8 @@ function getDefaultActive(routePath) {
  )?.children[0]?.path;
 }

-function onResizeMenu() {
-  nextTick(() => {
-    handleResize(menuRef.value);
-  });
-}
-
 onMounted(() => {
  getDefaultActive(route.path);
-  window.addEventListener("resize", onResizeMenu);
-});
-
-onBeforeUnmount(() => {
-  window.removeEventListener("resize", onResizeMenu);
 });

 watch(
--- a/src/layout/components/tag/index.vue
+++ b/src/layout/components/tag/index.vue
@@ -1,123 +1,53 @@
 <script setup lang="ts">
-import {
-  ref,
-  watch,
-  unref,
-  toRaw,
-  reactive,
-  nextTick,
-  computed,
-  ComputedRef,
-  CSSProperties,
-  onBeforeMount,
-  getCurrentInstance
-} from "vue";
-
-import close from "/@/assets/svg/close.svg?component";
-import refresh from "/@/assets/svg/refresh.svg?component";
-import closeAll from "/@/assets/svg/close_all.svg?component";
-import closeLeft from "/@/assets/svg/close_left.svg?component";
-import closeOther from "/@/assets/svg/close_other.svg?component";
-import closeRight from "/@/assets/svg/close_right.svg?component";
-
-import { useI18n } from "vue-i18n";
 import { emitter } from "/@/utils/mitt";
-import type { StorageConfigs } from "/#/index";
+import { RouteConfigs } from "../../types";
+import { useTags } from "../../hooks/useTag";
 import { routerArrays } from "/@/layout/types";
-import { useRoute, useRouter } from "vue-router";
 import { isEqual, isEmpty } from "lodash-unified";
-import { transformI18n, $t } from "/@/plugins/i18n";
-import { RouteConfigs, tagsViewsType } from "../../types";
+import { toggleClass, removeClass } from "@pureadmin/utils";
+import { useResizeObserver, useDebounceFn } from "@vueuse/core";
 import { useSettingStoreHook } from "/@/store/modules/settings";
 import { handleAliveRoute, delAliveRoutes } from "/@/router/utils";
 import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
 import { usePermissionStoreHook } from "/@/store/modules/permission";
-import { templateRef, useResizeObserver, useDebounceFn } from "@vueuse/core";
-import {
-  toggleClass,
-  removeClass,
-  hasClass,
-  storageLocal
-} from "@pureadmin/utils";
+import { ref, watch, unref, toRaw, nextTick, onBeforeMount } from "vue";

-const { t } = useI18n();
-const route = useRoute();
-const router = useRouter();
-const translateX = ref<number>(0);
-const activeIndex = ref<number>(-1);
-let refreshButton = "refresh-button";
-const instance = getCurrentInstance();
-const pureSetting = useSettingStoreHook();
-const tabDom = templateRef<HTMLElement | null>("tabDom", null);
-const containerDom = templateRef<HTMLElement | null>("containerDom", null);
-const scrollbarDom = templateRef<HTMLElement | null>("scrollbarDom", null);
-const showTags =
-  ref(storageLocal.getItem<StorageConfigs>("responsive-configure").hideTabs) ??
-  "false";
-// @ts-expect-error
-let multiTags: ComputedRef<Array<RouteConfigs>> = computed(() => {
-  return useMultiTagsStoreHook()?.multiTags;
-});
+const {
+  route,
+  router,
+  visible,
+  showTags,
+  instance,
+  multiTags,
+  tagsViews,
+  buttonTop,
+  buttonLeft,
+  showModel,
+  translateX,
+  activeIndex,
+  getTabStyle,
+  iconIsActive,
+  linkIsActive,
+  currentSelect,
+  scheduleIsActive,
+  getContextMenuStyle,
+  closeMenu,
+  onMounted,
+  onMouseenter,
+  onMouseleave,
+  transformI18n
+} = useTags();

-const linkIsActive = computed(() => {
-  return item => {
-    if (Object.keys(route.query).length === 0) {
-      if (route.path === item.path) {
-        return "is-active";
-      } else {
-        return "";
-      }
-    } else {
-      if (isEqual(route?.query, item?.query)) {
-        return "is-active";
-      } else {
-        return "";
-      }
-    }
-  };
-});
-
-const scheduleIsActive = computed(() => {
-  return item => {
-    if (Object.keys(route.query).length === 0) {
-      if (route.path === item.path) {
-        return "schedule-active";
-      } else {
-        return "";
-      }
-    } else {
-      if (isEqual(route?.query, item?.query)) {
-        return "schedule-active";
-      } else {
-        return "";
-      }
-    }
-  };
-});
-
-const iconIsActive = computed(() => {
-  return (item, index) => {
-    if (index === 0) return;
-    if (Object.keys(route.query).length === 0) {
-      if (route.path === item.path) {
-        return true;
-      } else {
-        return false;
-      }
-    } else {
-      if (isEqual(route?.query, item?.query)) {
-        return true;
-      } else {
-        return false;
-      }
-    }
-  };
-});
+const tabDom = ref();
+const containerDom = ref();
+const scrollbarDom = ref();

 const dynamicTagView = () => {
  const index = multiTags.value.findIndex(item => {
-    if (item?.query) {
-      return isEqual(route?.query, item?.query);
+    if (item.query) {
+      return isEqual(route.query, item.query);
+    } else if (item.params) {
+      return isEqual(route.params, item.params);
    } else {
      return item.path === route.path;
    }
@@ -125,23 +55,9 @@ const dynamicTagView = () => {
  moveToView(index);
 };

-watch([route], () => {
-  activeIndex.value = -1;
-  dynamicTagView();
-});
-
-useResizeObserver(
-  scrollbarDom,
-  useDebounceFn(() => {
-    dynamicTagView();
-  }, 200)
-);
-
-const tabNavPadding = 10;
 const moveToView = (index: number): void => {
-  if (!instance.refs["dynamic" + index]) {
-    return;
-  }
+  const tabNavPadding = 10;
+  if (!instance.refs["dynamic" + index]) return;
  const tabItemEl = instance.refs["dynamic" + index][0];
  const tabItemElOffsetLeft = (tabItemEl as HTMLElement)?.offsetLeft;
  const tabItemOffsetWidth = (tabItemEl as HTMLElement)?.offsetWidth;
@@ -151,7 +67,6 @@ const moveToView = (index: number): void => {
    : 0;
  // 已有标签页总长度（包含溢出部分）
  const tabDomWidth = tabDom.value ? tabDom.value?.offsetWidth : 0;
-
  if (tabDomWidth < scrollbarDomWidth || tabItemElOffsetLeft === 0) {
    translateX.value = 0;
  } else if (tabItemElOffsetLeft < -translateX.value) {
@@ -200,71 +115,6 @@ const handleScroll = (offset: number): void => {
  }
 };

-const tagsViews = reactive<Array<tagsViewsType>>([
-  {
-    icon: refresh,
-    text: $t("buttons.hsreload"),
-    divided: false,
-    disabled: false,
-    show: true
-  },
-  {
-    icon: close,
-    text: $t("buttons.hscloseCurrentTab"),
-    divided: false,
-    disabled: multiTags.value.length > 1 ? false : true,
-    show: true
-  },
-  {
-    icon: closeLeft,
-    text: $t("buttons.hscloseLeftTabs"),
-    divided: true,
-    disabled: multiTags.value.length > 1 ? false : true,
-    show: true
-  },
-  {
-    icon: closeRight,
-    text: $t("buttons.hscloseRightTabs"),
-    divided: false,
-    disabled: multiTags.value.length > 1 ? false : true,
-    show: true
-  },
-  {
-    icon: closeOther,
-    text: $t("buttons.hscloseOtherTabs"),
-    divided: true,
-    disabled: multiTags.value.length > 2 ? false : true,
-    show: true
-  },
-  {
-    icon: closeAll,
-    text: $t("buttons.hscloseAllTabs"),
-    divided: false,
-    disabled: multiTags.value.length > 1 ? false : true,
-    show: true
-  }
-]);
-
-// 显示模式，默认灵动模式显示
-const showModel = ref(
-  storageLocal.getItem<StorageConfigs>("responsive-configure")?.showModel ||
-    "smart"
-);
-if (!showModel.value) {
-  const configure = storageLocal.getItem<StorageConfigs>(
-    "responsive-configure"
-  );
-  configure.showModel = "card";
-  storageLocal.setItem("responsive-configure", configure);
-}
-
-let visible = ref(false);
-let buttonLeft = ref(0);
-let buttonTop = ref(0);
-
-// 当前右键选中的路由信息
-let currentSelect = ref({});
-
 function dynamicRouteTag(value: string, parentPath: string): void {
  const hasValue = multiTags.value.some(item => {
    return item.path === value;
@@ -292,8 +142,9 @@ function dynamicRouteTag(value: string, parentPath: string): void {
  concatPath(router.options.routes as any, value, parentPath);
 }

-// 重新加载
+/** 刷新路由 */
 function onFresh() {
+  const refreshButton = "refresh-button";
  toggleClass(true, refreshButton, document.querySelector(".rotate"));
  const { fullPath, query } = unref(route);
  router.replace({
@@ -313,6 +164,10 @@ function deleteDynamicTag(obj: any, current: any, tag?: string) {
      if (item.path === obj.path) {
        return item.query === obj.query;
      }
+    } else if (item.params) {
+      if (item.path === obj.path) {
+        return item.params === obj.params;
+      }
    } else {
      return item.path === obj.path;
    }
@@ -351,24 +206,25 @@ function deleteDynamicTag(obj: any, current: any, tag?: string) {
      : handleAliveRoute(route.matched, "delete");
    // 如果删除当前激活tag就自动切换到最后一个tag
    if (tag === "left") return;
-    nextTick(() => {
-      router.push({
-        path: newRoute[0].path,
-        query: newRoute[0].query
-      });
-    });
+    if (newRoute[0]?.query) {
+      router.push({ name: newRoute[0].name, query: newRoute[0].query });
+    } else if (newRoute[0]?.params) {
+      router.push({ name: newRoute[0].name, params: newRoute[0].params });
+    } else {
+      router.push({ path: newRoute[0].path });
+    }
  } else {
    // 删除缓存路由
    tag ? delAliveRoutes(delAliveRouteList) : delAliveRoutes([obj]);
    if (!multiTags.value.length) return;
-    let isHasActiveTag = multiTags.value.some(item => {
-      return item.path === route.path;
-    });
-    !isHasActiveTag &&
-      router.push({
-        path: newRoute[0].path,
-        query: newRoute[0].query
-      });
+    if (multiTags.value.some(item => item.path === route.path)) return;
+    if (newRoute[0]?.query) {
+      router.push({ name: newRoute[0].name, query: newRoute[0].query });
+    } else if (newRoute[0]?.params) {
+      router.push({ name: newRoute[0].name, params: newRoute[0].params });
+    } else {
+      router.push({ path: newRoute[0].path });
+    }
  }
 }

@@ -385,7 +241,8 @@ function onClickDrop(key, item, selectRoute?: RouteConfigs) {
      path: selectRoute.path,
      meta: selectRoute.meta,
      name: selectRoute.name,
-      query: selectRoute.query
+      query: selectRoute?.query,
+      params: selectRoute?.params
    };
  } else {
    selectTagRoute = { path: route.path, meta: route.meta };
@@ -394,7 +251,7 @@ function onClickDrop(key, item, selectRoute?: RouteConfigs) {
  // 当前路由信息
  switch (key) {
    case 0:
-      // 重新加载
+      // 刷新路由
      onFresh();
      break;
    case 1:
@@ -433,15 +290,11 @@ function handleCommand(command: any) {
  onClickDrop(key, item);
 }

-// 触发右键中菜单的点击事件
+/** 触发右键中菜单的点击事件 */
 function selectTag(key, item) {
  onClickDrop(key, item, currentSelect.value);
 }

-function closeMenu() {
-  visible.value = false;
-}
-
 function showMenus(value: boolean) {
  Array.of(1, 2, 3, 4, 5).forEach(v => {
    tagsViews[v].show = value;
@@ -454,7 +307,7 @@ function disabledMenus(value: boolean) {
  });
 }

-// 检查当前右键的菜单两边是否存在别的菜单，如果左侧的菜单是首页，则不显示关闭左侧标签页，如果右侧没有菜单，则不显示关闭右侧标签页
+/** 检查当前右键的菜单两边是否存在别的菜单，如果左侧的菜单是首页，则不显示关闭左侧标签页，如果右侧没有菜单，则不显示关闭右侧标签页 */
 function showMenuModel(
  currentPath: string,
  query: object = {},
@@ -514,7 +367,7 @@ function openMenu(tag, e) {
    // 右键菜单为首页，只显示刷新
    showMenus(false);
    tagsViews[0].show = true;
-  } else if (route.path !== tag.path) {
+  } else if (route.path !== tag.path && route.name !== tag.name) {
    // 右键菜单不匹配当前路由，隐藏刷新
    tagsViews[0].show = false;
    showMenuModel(tag.path, tag.query);
@@ -542,63 +395,36 @@ function openMenu(tag, e) {
  } else {
    buttonLeft.value = left;
  }
-  pureSetting.hiddenSideBar
+  useSettingStoreHook().hiddenSideBar
    ? (buttonTop.value = e.clientY)
    : (buttonTop.value = e.clientY - 40);
-  setTimeout(() => {
+  nextTick(() => {
    visible.value = true;
-  }, 10);
-}
-
-// 触发tags标签切换
-function tagOnClick(item) {
-  router.push({
-    path: item?.path,
-    query: item?.query
  });
-  showMenuModel(item?.path, item?.query);
 }

-// 鼠标移入
-function onMouseenter(index) {
-  if (index) activeIndex.value = index;
-  if (unref(showModel) === "smart") {
-    if (hasClass(instance.refs["schedule" + index][0], "schedule-active"))
-      return;
-    toggleClass(true, "schedule-in", instance.refs["schedule" + index][0]);
-    toggleClass(false, "schedule-out", instance.refs["schedule" + index][0]);
-  } else {
-    if (hasClass(instance.refs["dynamic" + index][0], "card-active")) return;
-    toggleClass(true, "card-in", instance.refs["dynamic" + index][0]);
-    toggleClass(false, "card-out", instance.refs["dynamic" + index][0]);
-  }
-}
-
-// 鼠标移出
-function onMouseleave(index) {
-  activeIndex.value = -1;
-  if (unref(showModel) === "smart") {
-    if (hasClass(instance.refs["schedule" + index][0], "schedule-active"))
-      return;
-    toggleClass(false, "schedule-in", instance.refs["schedule" + index][0]);
-    toggleClass(true, "schedule-out", instance.refs["schedule" + index][0]);
-  } else {
-    if (hasClass(instance.refs["dynamic" + index][0], "card-active")) return;
-    toggleClass(false, "card-in", instance.refs["dynamic" + index][0]);
-    toggleClass(true, "card-out", instance.refs["dynamic" + index][0]);
-  }
-}
-
-watch(
-  () => visible.value,
-  val => {
-    if (val) {
-      document.body.addEventListener("click", closeMenu);
+/** 触发tags标签切换 */
+function tagOnClick(item) {
+  const { name, path } = item;
+  if (name) {
+    if (item.query) {
+      router.push({
+        name,
+        query: item.query
+      });
+    } else if (item.params) {
+      router.push({
+        name,
+        params: item.params
+      });
    } else {
-      document.body.removeEventListener("click", closeMenu);
+      router.push({ name });
    }
+  } else {
+    router.push({ path });
  }
-);
+  // showMenuModel(item?.path, item?.query);
+}

 onBeforeMount(() => {
  if (!instance) return;
@@ -626,14 +452,18 @@ onBeforeMount(() => {
  });
 });

-const getTabStyle = computed((): CSSProperties => {
-  return {
-    transform: `translateX(${translateX.value}px)`
-  };
+watch([route], () => {
+  activeIndex.value = -1;
+  dynamicTagView();
 });

-const getContextMenuStyle = computed((): CSSProperties => {
-  return { left: buttonLeft.value + "px", top: buttonTop.value + "px" };
+onMounted(() => {
+  useResizeObserver(
+    scrollbarDom,
+    useDebounceFn(() => {
+      dynamicTagView();
+    }, 200)
+  );
 });
 </script>

@@ -705,7 +535,7 @@ const getContextMenuStyle = computed((): CSSProperties => {
        >
          <li v-if="item.show" @click="selectTag(key, item)">
            <component :is="toRaw(item.icon)" :key="key" />
-            {{ t(item.text) }}
+            {{ transformI18n(item.text) }}
          </li>
        </div>
      </ul>
@@ -714,7 +544,7 @@ const getContextMenuStyle = computed((): CSSProperties => {
    <ul class="right-button">
      <li>
        <span
-          :title="t('buttons.hsrefreshRoute')"
+          :title="transformI18n('buttons.hsrefreshRoute')"
          class="el-icon-refresh-right rotate"
          @click="onFresh"
        >
@@ -742,7 +572,7 @@ const getContextMenuStyle = computed((): CSSProperties => {
                  :key="key"
                  style="margin-right: 6px"
                />
-                {{ t(item.text) }}
+                {{ transformI18n(item.text) }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
--- a/src/layout/hooks/useTag.ts
+++ b/src/layout/hooks/useTag.ts
@@ -0,0 +1,218 @@
+import {
+  ref,
+  unref,
+  watch,
+  computed,
+  reactive,
+  onMounted,
+  CSSProperties,
+  getCurrentInstance
+} from "vue";
+import { tagsViewsType } from "../types";
+import { isEqual } from "lodash-unified";
+import type { StorageConfigs } from "/#/index";
+import { useEventListener } from "@vueuse/core";
+import { useRoute, useRouter } from "vue-router";
+import { transformI18n, $t } from "/@/plugins/i18n";
+import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
+import { storageLocal, toggleClass, hasClass } from "@pureadmin/utils";
+
+import close from "/@/assets/svg/close.svg?component";
+import refresh from "/@/assets/svg/refresh.svg?component";
+import closeAll from "/@/assets/svg/close_all.svg?component";
+import closeLeft from "/@/assets/svg/close_left.svg?component";
+import closeOther from "/@/assets/svg/close_other.svg?component";
+import closeRight from "/@/assets/svg/close_right.svg?component";
+
+export function useTags() {
+  const route = useRoute();
+  const router = useRouter();
+  const instance = getCurrentInstance();
+
+  const buttonTop = ref(0);
+  const buttonLeft = ref(0);
+  const translateX = ref(0);
+  const visible = ref(false);
+  const activeIndex = ref(-1);
+  // 当前右键选中的路由信息
+  const currentSelect = ref({});
+
+  /** 显示模式，默认灵动模式 */
+  const showModel = ref(
+    storageLocal.getItem<StorageConfigs>("responsive-configure")?.showModel ||
+      "smart"
+  );
+  /** 是否隐藏标签页，默认显示 */
+  const showTags =
+    ref(
+      storageLocal.getItem<StorageConfigs>("responsive-configure").hideTabs
+    ) ?? ref("false");
+  const multiTags: any = computed(() => {
+    return useMultiTagsStoreHook().multiTags;
+  });
+
+  const tagsViews = reactive<Array<tagsViewsType>>([
+    {
+      icon: refresh,
+      text: $t("buttons.hsreload"),
+      divided: false,
+      disabled: false,
+      show: true
+    },
+    {
+      icon: close,
+      text: $t("buttons.hscloseCurrentTab"),
+      divided: false,
+      disabled: multiTags.value.length > 1 ? false : true,
+      show: true
+    },
+    {
+      icon: closeLeft,
+      text: $t("buttons.hscloseLeftTabs"),
+      divided: true,
+      disabled: multiTags.value.length > 1 ? false : true,
+      show: true
+    },
+    {
+      icon: closeRight,
+      text: $t("buttons.hscloseRightTabs"),
+      divided: false,
+      disabled: multiTags.value.length > 1 ? false : true,
+      show: true
+    },
+    {
+      icon: closeOther,
+      text: $t("buttons.hscloseOtherTabs"),
+      divided: true,
+      disabled: multiTags.value.length > 2 ? false : true,
+      show: true
+    },
+    {
+      icon: closeAll,
+      text: $t("buttons.hscloseAllTabs"),
+      divided: false,
+      disabled: multiTags.value.length > 1 ? false : true,
+      show: true
+    }
+  ]);
+
+  function conditionHandle(item, previous, next) {
+    if (
+      Object.keys(route.query).length === 0 &&
+      Object.keys(route.params).length === 0
+    ) {
+      return route.path === item.path ? previous : next;
+    } else if (Object.keys(route.query).length > 0) {
+      return isEqual(route.query, item.query) ? previous : next;
+    } else {
+      return isEqual(route.params, item.params) ? previous : next;
+    }
+  }
+
+  const iconIsActive = computed(() => {
+    return (item, index) => {
+      if (index === 0) return;
+      return conditionHandle(item, true, false);
+    };
+  });
+
+  const linkIsActive = computed(() => {
+    return item => {
+      return conditionHandle(item, "is-active", "");
+    };
+  });
+
+  const scheduleIsActive = computed(() => {
+    return item => {
+      return conditionHandle(item, "schedule-active", "");
+    };
+  });
+
+  const getTabStyle = computed((): CSSProperties => {
+    return {
+      transform: `translateX(${translateX.value}px)`
+    };
+  });
+
+  const getContextMenuStyle = computed((): CSSProperties => {
+    return { left: buttonLeft.value + "px", top: buttonTop.value + "px" };
+  });
+
+  const closeMenu = () => {
+    visible.value = false;
+  };
+
+  /** 鼠标移入添加激活样式 */
+  function onMouseenter(index) {
+    if (index) activeIndex.value = index;
+    if (unref(showModel) === "smart") {
+      if (hasClass(instance.refs["schedule" + index][0], "schedule-active"))
+        return;
+      toggleClass(true, "schedule-in", instance.refs["schedule" + index][0]);
+      toggleClass(false, "schedule-out", instance.refs["schedule" + index][0]);
+    } else {
+      if (hasClass(instance.refs["dynamic" + index][0], "card-active")) return;
+      toggleClass(true, "card-in", instance.refs["dynamic" + index][0]);
+      toggleClass(false, "card-out", instance.refs["dynamic" + index][0]);
+    }
+  }
+
+  /** 鼠标移出恢复默认样式 */
+  function onMouseleave(index) {
+    activeIndex.value = -1;
+    if (unref(showModel) === "smart") {
+      if (hasClass(instance.refs["schedule" + index][0], "schedule-active"))
+        return;
+      toggleClass(false, "schedule-in", instance.refs["schedule" + index][0]);
+      toggleClass(true, "schedule-out", instance.refs["schedule" + index][0]);
+    } else {
+      if (hasClass(instance.refs["dynamic" + index][0], "card-active")) return;
+      toggleClass(false, "card-in", instance.refs["dynamic" + index][0]);
+      toggleClass(true, "card-out", instance.refs["dynamic" + index][0]);
+    }
+  }
+
+  onMounted(() => {
+    if (!showModel.value) {
+      const configure = storageLocal.getItem<StorageConfigs>(
+        "responsive-configure"
+      );
+      configure.showModel = "card";
+      storageLocal.setItem("responsive-configure", configure);
+    }
+  });
+
+  watch(
+    () => visible.value,
+    () => {
+      useEventListener(document, "click", closeMenu);
+    }
+  );
+
+  return {
+    route,
+    router,
+    visible,
+    showTags,
+    instance,
+    multiTags,
+    showModel,
+    tagsViews,
+    buttonTop,
+    buttonLeft,
+    translateX,
+    activeIndex,
+    getTabStyle,
+    iconIsActive,
+    linkIsActive,
+    currentSelect,
+    scheduleIsActive,
+    getContextMenuStyle,
+    $t,
+    closeMenu,
+    onMounted,
+    onMouseenter,
+    onMouseleave,
+    transformI18n
+  };
+}
--- a/src/layout/types.ts
+++ b/src/layout/types.ts
@@ -22,6 +22,7 @@ export type RouteConfigs = {
  path?: string;
  parentPath?: string;
  query?: object;
+  params?: object;
  meta?: routeMetaType;
  children?: RouteConfigs[];
  name?: string;
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -8,17 +8,14 @@ import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
 import { usePermissionStoreHook } from "/@/store/modules/permission";
 import {
  Router,
-  RouteMeta,
  createRouter,
  RouteRecordRaw,
-  RouteComponent,
-  RouteRecordName
+  RouteComponent
 } from "vue-router";
 import {
  ascending,
  initRouter,
  getHistoryMode,
-  getParentPaths,
  findRouteByPath,
  handleAliveRoute,
  formatTwoStageRoutes,
@@ -148,69 +145,22 @@ router.beforeEach((to: toRouteType, _from, next) => {
      if (usePermissionStoreHook().wholeMenus.length === 0)
        initRouter(name.username).then((router: Router) => {
          if (!useMultiTagsStoreHook().getMultiTagsCache) {
-            const handTag = (
-              path: string,
-              parentPath: string,
-              name: RouteRecordName,
-              meta: RouteMeta
-            ): void => {
+            const { path } = to;
+            const index = findIndex(remainingRouter, v => {
+              return v.path == path;
+            });
+            const routes: any =
+              index === -1
+                ? router.options.routes[0].children
+                : router.options.routes;
+            const route = findRouteByPath(path, routes);
+            // query、params模式路由传参数的标签页不在此处处理
+            if (route && route.meta?.title) {
              useMultiTagsStoreHook().handleTags("push", {
-                path,
-                parentPath,
-                name,
-                meta
+                path: route.path,
+                name: route.name,
+                meta: route.meta
              });
-            };
-            // 未开启标签页缓存，刷新页面重定向到顶级路由（参考标签页操作例子，只针对静态路由）
-            if (to.meta?.refreshRedirect) {
-              const routes: any = router.options.routes;
-              const { refreshRedirect } = to.meta;
-              const { name, meta } = findRouteByPath(refreshRedirect, routes);
-              handTag(
-                refreshRedirect,
-                getParentPaths(refreshRedirect, routes)[1],
-                name,
-                meta
-              );
-              return router.push(refreshRedirect);
-            } else {
-              const { path } = to;
-              const index = findIndex(remainingRouter, v => {
-                return v.path == path;
-              });
-              const routes: any =
-                index === -1
-                  ? router.options.routes[0].children
-                  : router.options.routes;
-              const route = findRouteByPath(path, routes);
-              const routePartent = getParentPaths(path, routes);
-              // 未开启标签页缓存，刷新页面重定向到顶级路由（参考标签页操作例子，只针对动态路由）
-              if (
-                path !== routes[0].path &&
-                route?.meta?.rank !== 0 &&
-                routePartent.length === 0
-              ) {
-                if (!route?.meta?.refreshRedirect) return;
-                const { name, meta } = findRouteByPath(
-                  route.meta.refreshRedirect,
-                  routes
-                );
-                handTag(
-                  route.meta?.refreshRedirect,
-                  getParentPaths(route.meta?.refreshRedirect, routes)[0],
-                  name,
-                  meta
-                );
-                return router.push(route.meta?.refreshRedirect);
-              } else {
-                handTag(
-                  route.path,
-                  routePartent[routePartent.length - 1],
-                  route.name,
-                  route.meta
-                );
-                return router.push(path);
-              }
            }
          }
          router.push(to.fullPath);
--- a/src/router/modules/able.ts
+++ b/src/router/modules/able.ts
@@ -1,10 +1,8 @@
 import { $t } from "/@/plugins/i18n";
 import type { RouteConfigsTable } from "/#/index";
-const Layout = () => import("/@/layout/index.vue");

 const ableRouter: RouteConfigsTable = {
  path: "/able",
-  component: Layout,
  redirect: "/able/watermark",
  meta: {
    icon: "ubuntu-fill",
--- a/src/router/modules/about.ts
+++ b/src/router/modules/about.ts
@@ -1,10 +1,8 @@
 import { $t } from "/@/plugins/i18n";
 import type { RouteConfigsTable } from "/#/index";
-const Layout = () => import("/@/layout/index.vue");

 const aboutRouter: RouteConfigsTable = {
  path: "/about",
-  component: Layout,
  redirect: "/about/index",
  meta: {
    // icon: "question-line",
--- a/src/router/modules/components.ts
+++ b/src/router/modules/components.ts
@@ -1,10 +1,8 @@
 import { $t } from "/@/plugins/i18n";
 import type { RouteConfigsTable } from "/#/index";
-const Layout = () => import("/@/layout/index.vue");

 const componentsRouter: RouteConfigsTable = {
  path: "/components",
-  component: Layout,
  redirect: "/components/video",
  meta: {
    icon: "menu",
--- a/src/router/modules/editor.ts
+++ b/src/router/modules/editor.ts
@@ -1,10 +1,8 @@
 import { $t } from "/@/plugins/i18n";
 import type { RouteConfigsTable } from "/#/index";
-const Layout = () => import("/@/layout/index.vue");

 const editorRouter: RouteConfigsTable = {
  path: "/editor",
-  component: Layout,
  redirect: "/editor/index",
  meta: {
    icon: "edit",
--- a/src/router/modules/error.ts
+++ b/src/router/modules/error.ts
@@ -1,10 +1,8 @@
 import { $t } from "/@/plugins/i18n";
 import type { RouteConfigsTable } from "/#/index";
-const Layout = () => import("/@/layout/index.vue");

 const errorRouter: RouteConfigsTable = {
  path: "/error",
-  component: Layout,
  redirect: "/error/403",
  meta: {
    icon: "information-line",
--- a/src/router/modules/flowchart.ts
+++ b/src/router/modules/flowchart.ts
@@ -1,10 +1,8 @@
 import { $t } from "/@/plugins/i18n";
 import type { RouteConfigsTable } from "/#/index";
-const Layout = () => import("/@/layout/index.vue");

 const flowChartRouter: RouteConfigsTable = {
  path: "/flowChart",
-  component: Layout,
  redirect: "/flowChart/index",
  meta: {
    icon: "set-up",
--- a/src/router/modules/formdesign.ts
+++ b/src/router/modules/formdesign.ts
@@ -1,10 +1,8 @@
 import { $t } from "/@/plugins/i18n";
 import type { RouteConfigsTable } from "/#/index";
-const Layout = () => import("/@/layout/index.vue");

 const formDesignRouter: RouteConfigsTable = {
  path: "/formDesign",
-  component: Layout,
  redirect: "/formDesign/index",
  meta: {
    icon: "terminal-window-line",
--- a/src/router/modules/guide.ts
+++ b/src/router/modules/guide.ts
@@ -1,10 +1,8 @@
 import { $t } from "/@/plugins/i18n";
 import type { RouteConfigsTable } from "/#/index";
-const Layout = () => import("/@/layout/index.vue");

 const guideRouter: RouteConfigsTable = {
  path: "/guide",
-  component: Layout,
  redirect: "/guide/index",
  meta: {
    icon: "guide",
--- a/src/router/modules/list.ts
+++ b/src/router/modules/list.ts
@@ -1,10 +1,8 @@
 import { $t } from "/@/plugins/i18n";
 import type { RouteConfigsTable } from "/#/index";
-const Layout = () => import("/@/layout/index.vue");

 const ableRouter: RouteConfigsTable = {
  path: "/list",
-  component: Layout,
  redirect: "/list/card",
  meta: {
    icon: "list-check",
--- a/src/router/modules/nested.ts
+++ b/src/router/modules/nested.ts
@@ -1,10 +1,8 @@
 import { $t } from "/@/plugins/i18n";
 import type { RouteConfigsTable } from "/#/index";
-const Layout = () => import("/@/layout/index.vue");

 const nestedRouter: RouteConfigsTable = {
  path: "/nested",
-  component: Layout,
  redirect: "/nested/menu1/menu1-1",
  meta: {
    title: $t("menus.hsmenus"),
--- a/src/router/modules/ppt.ts
+++ b/src/router/modules/ppt.ts
@@ -1,10 +1,8 @@
 import type { RouteConfigsTable } from "/#/index";
-const Layout = () => import("/@/layout/index.vue");
 const IFrame = () => import("/@/layout/frameView.vue");

 const pptRouter: RouteConfigsTable = {
  path: "/ppt",
-  component: Layout,
  redirect: "/ppt/index",
  meta: {
    icon: "ppt",
--- a/src/router/modules/result.ts
+++ b/src/router/modules/result.ts
@@ -1,10 +1,8 @@
 import { $t } from "/@/plugins/i18n";
 import type { RouteConfigsTable } from "/#/index";
-const Layout = () => import("/@/layout/index.vue");

 const resultRouter: RouteConfigsTable = {
  path: "/result",
-  component: Layout,
  redirect: "/result/success",
  meta: {
    icon: "checkbox-circle-line",
--- a/src/router/types.ts
+++ b/src/router/types.ts
@@ -3,7 +3,6 @@ import { RouteLocationNormalized } from "vue-router";
 export interface toRouteType extends RouteLocationNormalized {
  meta: {
    keepAlive?: boolean;
-    refreshRedirect: string;
    dynamicLevel?: string;
  };
 }
--- a/src/router/utils.ts
+++ b/src/router/utils.ts
@@ -7,13 +7,13 @@ import {
  RouteRecordNormalized
 } from "vue-router";
 import { router } from "./index";
+import { isProxy, toRaw } from "vue";
 import { loadEnv } from "../../build";
 import { cloneDeep } from "lodash-unified";
 import { useTimeoutFn } from "@vueuse/core";
 import { RouteConfigs } from "/@/layout/types";
 import { buildHierarchyTree } from "@pureadmin/utils";
 import { usePermissionStoreHook } from "/@/store/modules/permission";
-const Layout = () => import("/@/layout/index.vue");
 const IFrame = () => import("/@/layout/frameView.vue");
 // https://cn.vitejs.dev/guide/features.html#glob-import
 const modulesRoutes = import.meta.glob("/src/views/**/*.{vue,tsx}");
@@ -87,7 +87,7 @@ function getParentPaths(path: string, routes: RouteRecordRaw[]) {
 function findRouteByPath(path: string, routes: RouteRecordRaw[]) {
  let res = routes.find((item: { path: string }) => item.path == path);
  if (res) {
-    return res;
+    return isProxy(res) ? toRaw(res) : res;
  } else {
    for (let i = 0; i < routes.length; i++) {
      if (
@@ -96,7 +96,7 @@ function findRouteByPath(path: string, routes: RouteRecordRaw[]) {
      ) {
        res = findRouteByPath(path, routes[i].children);
        if (res) {
-          return res;
+          return isProxy(res) ? toRaw(res) : res;
        }
      }
    }
@@ -229,17 +229,16 @@ function addAsyncRoutes(arrRoutes: Array<RouteRecordRaw>) {
  arrRoutes.forEach((v: RouteRecordRaw) => {
    // 将backstage属性加入meta，标识此路由为后端返回路由
    v.meta.backstage = true;
-    if (v.redirect) {
-      v.component = Layout;
-    } else if (v.meta?.frameSrc) {
-      v.component = IFrame;
-    } else {
-      // 对后端传component组件路径和不传做兼容（如果后端传component组件路径，那么path可以随便写，如果不传，component组件路径会根path保持一致）
-      const index = v?.component
-        ? modulesRoutesKeys.findIndex(ev => ev.includes(v.component as any))
-        : modulesRoutesKeys.findIndex(ev => ev.includes(v.path));
-      v.component = modulesRoutes[modulesRoutesKeys[index]];
-    }
+    // 父级的redirect属性取值：如果子级存在且父级的redirect属性不存在，默认取第一个子级的path；如果子级存在且父级的redirect属性存在，取存在的redirect属性，会覆盖默认值
+    if (v?.children && !v.redirect) v.redirect = v.children[0].path;
+    // 父级的name属性取值：如果子级存在且父级的name属性不存在，默认取第一个子级的name；如果子级存在且父级的name属性存在，取存在的name属性，会覆盖默认值
+    if (v?.children && !v.name) v.name = v.children[0].name;
+    if (v.meta?.frameSrc) v.component = IFrame;
+    // 对后端传component组件路径和不传做兼容（如果后端传component组件路径，那么path可以随便写，如果不传，component组件路径会跟path保持一致）
+    const index = v?.component
+      ? modulesRoutesKeys.findIndex(ev => ev.includes(v.component as any))
+      : modulesRoutesKeys.findIndex(ev => ev.includes(v.path));
+    v.component = modulesRoutes[modulesRoutesKeys[index]];
    if (v.children) {
      addAsyncRoutes(v.children);
    }
--- a/src/store/modules/multiTags.ts
+++ b/src/store/modules/multiTags.ts
@@ -48,9 +48,13 @@ export const useMultiTagsStore = defineStore({
        case "push":
          {
            const tagVal = value as multiType;
+            // 不添加到标签页
+            if (tagVal?.meta?.hiddenTag) return;
+            // 如果是外链无需添加信息到标签页
            if (isUrl(tagVal?.name)) return;
+            // 如果title为空拒绝添加空信息到标签页
            if (tagVal?.meta?.title.length === 0) return;
-            const tagPath = tagVal?.path;
+            const tagPath = tagVal.path;
            // 判断tag是否已存在
            const tagHasExits = this.multiTags.some(tag => {
              return tag.path === tagPath;
@@ -58,20 +62,24 @@ export const useMultiTagsStore = defineStore({

            // 判断tag中的query键值是否相等
            const tagQueryHasExits = this.multiTags.some(tag => {
-              return isEqual(tag.query, tagVal?.query);
+              return isEqual(tag?.query, tagVal?.query);
            });

-            if (tagHasExits && tagQueryHasExits) return;
+            // 判断tag中的params键值是否相等
+            const tagParamsHasExits = this.multiTags.some(tag => {
+              return isEqual(tag?.params, tagVal?.params);
+            });

+            if (tagHasExits && tagQueryHasExits && tagParamsHasExits) return;
+
+            // 动态路由可打开的最大数量
            const dynamicLevel = tagVal?.meta?.dynamicLevel ?? -1;
            if (dynamicLevel > 0) {
-              // dynamicLevel动态路由可打开的数量
-              // 获取到已经打开的动态路由数, 判断是否大于dynamicLevel
              if (
                this.multiTags.filter(e => e?.path === tagPath).length >=
                dynamicLevel
              ) {
-                // 关闭第一个
+                // 如果当前已打开的动态路由数大于dynamicLevel，替换第一个动态路由标签
                const index = this.multiTags.findIndex(
                  item => item?.path === tagPath
                );
--- a/src/store/modules/types.ts
+++ b/src/store/modules/types.ts
@@ -27,6 +27,7 @@ export type multiType = {
  name: string;
  meta: any;
  query?: object;
+  params?: object;
 };

 export type setType = {
--- a/src/views/about/columns.tsx
+++ b/src/views/about/columns.tsx
@@ -51,7 +51,7 @@ export function useColumns() {
      label: "QQ交流群",
      cellRenderer: () => {
        return (
-          <a href="https://jq.qq.com/?_wv=1027&k=HntMx0dt" target="_blank">
+          <a href="https://jq.qq.com/?_wv=1027&k=E9fwmFGr" target="_blank">
            <span style="color: var(--el-color-primary)">
              点击链接加入群聊【Pure Admin】
            </span>
--- a/src/views/tabs/hooks.ts
+++ b/src/views/tabs/hooks.ts
@@ -5,26 +5,48 @@ import { onBeforeMount } from "vue";
 export function useDetail() {
  const route = useRoute();
  const router = useRouter();
-  const id = route.query?.id ?? -1;
+  const id = route.query?.id ? route.query?.id : route.params?.id;

-  function toDetail(index: number | string | string[] | number[]) {
-    useMultiTagsStoreHook().handleTags("push", {
-      path: `/tabs/detail`,
-      parentPath: route.matched[0].path,
-      name: "TabDetail",
-      query: { id: String(index) },
-      meta: {
-        title: { zh: `No.${index} - 详情信息`, en: `No.${index} - DetailInfo` },
-        showLink: false,
-        dynamicLevel: 3
-      }
-    });
-    router.push({ name: "TabDetail", query: { id: String(index) } });
+  function toDetail(
+    index: number | string | string[] | number[],
+    model: string
+  ) {
+    if (model === "query") {
+      // 保存信息到标签页
+      useMultiTagsStoreHook().handleTags("push", {
+        path: `/tabs/query-detail`,
+        name: "TabQueryDetail",
+        query: { id: String(index) },
+        meta: {
+          title: {
+            zh: `No.${index} - 详情信息`,
+            en: `No.${index} - DetailInfo`
+          },
+          // 最大打开标签数
+          dynamicLevel: 3
+        }
+      });
+      // 路由跳转
+      router.push({ name: "TabQueryDetail", query: { id: String(index) } });
+    } else {
+      useMultiTagsStoreHook().handleTags("push", {
+        path: `/tabs/params-detail/:id`,
+        name: "TabParamsDetail",
+        params: { id: String(index) },
+        meta: {
+          title: {
+            zh: `No.${index} - 详情信息`,
+            en: `No.${index} - DetailInfo`
+          }
+        }
+      });
+      router.push({ name: "TabParamsDetail", params: { id: String(index) } });
+    }
  }

-  function initToDetail() {
+  function initToDetail(model) {
    onBeforeMount(() => {
-      if (id) toDetail(id);
+      if (id) toDetail(id, model);
    });
  }

--- a/src/views/tabs/index.vue
+++ b/src/views/tabs/index.vue
@@ -6,8 +6,8 @@ import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
 import { usePermissionStoreHook } from "/@/store/modules/permission";
 import {
  deleteChildren,
-  appendFieldByUniqueId,
-  getNodeByUniqueId
+  getNodeByUniqueId,
+  appendFieldByUniqueId
 } from "@pureadmin/utils";
 import { useDetail } from "./hooks";

@@ -50,9 +50,32 @@ function onCloseTags() {
    <template #header>
      <div>标签页复用，超出限制自动关闭（使用场景: 动态路由）</div>
    </template>
-    <el-button v-for="index in 6" :key="index" @click="toDetail(index)">
-      打开{{ index }}详情页
-    </el-button>
+    <div class="flex-wrap items-center">
+      <p>query传参模式：</p>
+      <el-button
+        class="m-2"
+        v-for="index in 6"
+        :key="index"
+        @click="toDetail(index, 'query')"
+      >
+        打开{{ index }}详情页
+      </el-button>
+    </div>
+
+    <el-divider />
+
+    <div class="flex-wrap items-center">
+      <p>params传参模式：</p>
+      <el-button
+        class="m-2"
+        v-for="index in 6"
+        :key="index"
+        @click="toDetail(index, 'params')"
+      >
+        打开{{ index }}详情页
+      </el-button>
+    </div>
+
    <el-divider />
    <TreeSelect
      class="w-300px"
@@ -80,19 +103,27 @@ function onCloseTags() {
        <span>{{ transformI18n(data.meta.title) }}</span>
      </template>
    </TreeSelect>
-    <el-button class="ml-2" @click="onCloseTags">关闭标签</el-button>
-    <br />
-    <p class="mt-4">
-      注意：此demo并未开启标签页缓存，如果需要在
-      <span class="text-red-500">刷新页面</span>
-      的时候同时
-      <span class="text-red-500">保留标签页的显示</span>
-      或者
-      <span class="text-red-500">保留url的参数</span>
-      ，那么就需要开启标签页持久化。
-      <br />
-      开启方式：在页面最右上角有个设置的小图标，点进去，会看到项目配置面板，找到标签页持久化开启即可。
-    </p>
+    <el-button class="m-2" @click="onCloseTags">关闭标签</el-button>
+
+    <el-divider />
+    <el-button @click="$router.push({ name: 'Menu1-2-2' })">
+      跳转页内菜单（传name对象，优先推荐）
+    </el-button>
+    <el-button @click="$router.push('/nested/menu1/menu1-2/menu1-2-2')">
+      跳转页内菜单（直接传要跳转的路径）
+    </el-button>
+    <el-button
+      @click="$router.push({ path: '/nested/menu1/menu1-2/menu1-2-2' })"
+    >
+      跳转页内菜单（传path对象）
+    </el-button>
+    <el-link
+      class="ml-4"
+      href="https://router.vuejs.org/zh/guide/essentials/navigation.html#%E5%AF%BC%E8%88%AA%E5%88%B0%E4%B8%8D%E5%90%8C%E7%9A%84%E4%BD%8D%E7%BD%AE"
+      target="_blank"
+    >
+      点击查看更多跳转方式
+    </el-link>

    <el-divider />
    <el-button @click="$router.push({ name: 'Empty' })">
--- a/src/views/tabs/params-detail.vue
+++ b/src/views/tabs/params-detail.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { useDetail } from "./hooks";
+
+defineOptions({
+  name: "TabParamsDetail"
+});
+
+const { initToDetail, id } = useDetail();
+initToDetail("params");
+</script>
+
+<template>
+  <div>{{ id }} - 详情页内容在此（params传参）</div>
+</template>
--- a/src/views/tabs/query-detail.vue
+++ b/src/views/tabs/query-detail.vue
@@ -2,13 +2,13 @@
 import { useDetail } from "./hooks";

 defineOptions({
-  name: "TabDetail"
+  name: "TabQueryDetail"
 });

 const { initToDetail, id } = useDetail();
-initToDetail();
+initToDetail("query");
 </script>

 <template>
-  <div>{{ id }} - 详情页内容在此</div>
+  <div>{{ id }} - 详情页内容在此（query传参）</div>
 </template>
--- a/types/index.ts
+++ b/types/index.ts
@@ -54,7 +54,7 @@ export interface ResponsiveStorage {
 export interface RouteChildrenConfigsTable {
  /** 子路由地址 `必填` */
  path: string;
-  /** 路由名字（对应不要重复，根当前组件的`name`保持一致）`必填` */
+  /** 路由名字（对应不要重复，和当前组件的`name`保持一致）`必填` */
  name?: string;
  /** 路由重定向 `可选` */
  redirect?: string;
@@ -94,10 +94,10 @@ export interface RouteChildrenConfigsTable {
      /** 离场动画 */
      leaveTransition?: string;
    };
+    // 是否不添加信息到标签页，（默认`false`）
+    hiddenTag?: boolean;
    /** 动态路由可打开的最大数量 `可选` */
    dynamicLevel?: number;
-    /** 刷新重定向（用于未开启标签页缓存，刷新页面获取不到动态`title`）`可选` */
-    refreshRedirect?: string;
  };
  /** 子路由配置项 */
  children?: Array<RouteChildrenConfigsTable>;
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -38,7 +38,7 @@ export default defineConfig({
  shortcuts: {
    "bg-dark": "bg-bg_color",
    "wh-full": "w-full h-full",
-    "cp-on": "cursor-pointer outline-none",
+    "flex-wrap": "flex flex-wrap",
    "flex-c": "flex justify-center items-center",
    "flex-ac": "flex justify-around items-center",
    "flex-bc": "flex justify-between items-center",
Author	SHA1	Message	Date
xiaoxian521	3a0b2e04d4	release: update 3.4.0	2022-08-22 17:21:18 +08:00
xiaoxian521	cec867297d	chore: update	2022-08-22 16:16:17 +08:00
RealityBoy	cbe539c727	Refactor/tags (#332 ) * refactor: tags * chore: update * chore: update * chore: update * chore: update	2022-08-22 15:49:29 +08:00
xiaoxian521	7c84d9eb70	perf: router	2022-08-22 10:19:10 +08:00
xiaoxian521	5a7187d22f	perf: 移动端优化	2022-08-21 10:49:27 +08:00
xiaoxian521	a7e8249ae6	chore: update	2022-08-21 10:26:09 +08:00
xiaoxian521	d81ab81fb0	chore: update	2022-08-21 07:31:59 +08:00
xiaoxian521	846e7350fb	chore: update	2022-08-19 23:01:45 +08:00
xiaoxian521	102f27fe30	chore: update `element-plus@2.2.14` and perf menu	2022-08-19 21:41:49 +08:00
newives	0e76bd4aac	perf: 清空缓存并返回登录页时添加重置路由 (#329 ) Co-authored-by: xiaoxian521 <1923740402@qq.com>	2022-08-19 15:56:39 +08:00