feat: 路由示例页

src/assets/svgs/functions.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1747545050279" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="28696" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M0 0m349.090909 0l325.818182 0q349.090909 0 349.090909 349.090909l0 325.818182q0 349.090909-349.090909 349.090909l-325.818182 0q-349.090909 0-349.090909-349.090909l0-325.818182q0-349.090909 349.090909-349.090909Z" fill="#62A8FC" p-id="28697"></path><path d="M751.371636 631.691636A39.901091 39.901091 0 0 1 791.272727 671.581091v79.790545A39.901091 39.901091 0 0 1 751.371636 791.272727H272.64A39.901091 39.901091 0 0 1 232.727273 751.371636v-79.790545a39.901091 39.901091 0 0 1 39.901091-39.889455H751.36z m-19.944727 79.790546H571.845818a19.944727 19.944727 0 0 0-3.595636 39.575273l3.595636 0.314181h159.581091a19.944727 19.944727 0 0 0 0-39.889454z m19.944727-279.272727A39.901091 39.901091 0 0 1 791.272727 472.087273v79.802182a39.901091 39.901091 0 0 1-39.901091 39.889454H272.64A39.901091 39.901091 0 0 1 232.727273 551.912727V472.087273a39.901091 39.901091 0 0 1 39.901091-39.889455H751.36z m-418.909091 79.790545h-39.889454a19.944727 19.944727 0 0 0-3.595636 39.575273l3.595636 0.325818h39.889454a19.944727 19.944727 0 1 0 0-39.901091z m199.482182 0H412.276364a19.944727 19.944727 0 0 0-3.595637 39.575273l3.595637 0.325818h119.68a19.944727 19.944727 0 1 0 0-39.901091z m219.426909-279.272727A39.901091 39.901091 0 0 1 791.272727 272.628364v79.790545a39.901091 39.901091 0 0 1-39.901091 39.889455H272.64A39.901091 39.901091 0 0 1 232.727273 352.418909v-79.790545A39.901091 39.901091 0 0 1 272.628364 232.727273H751.36z m-458.798545 79.790545a19.944727 19.944727 0 1 0 0 39.901091 19.944727 19.944727 0 0 0 0-39.901091z m79.790545 0a19.944727 19.944727 0 1 0 0 39.901091 19.944727 19.944727 0 0 0 0-39.901091z" fill="#FFFFFF" p-id="28698"></path></svg>

src/directives/index.ts

@@ -10,7 +10,7 @@ import hasRole from "@/directives/modules/permission/has-role";
 // app就是vue实例，options则是安装函数的参数(可选)
 // install 方法的定义就插件对象，install 方法会在引入插件时自动被 vue 调用，并传参 vue 实例和 options
 
-const list: { [key: string]: Directive } = {
+const group: { [key: string]: Directive } = {
   antiShake,
   throttle,
   custom,
@@ -21,8 +21,8 @@ const list: { [key: string]: Directive } = {
 const directives = {
   install(app: App<Element>) {
     // 将一系列自定义指令对象安装到 Vue 应用实例中
-    for (const key in list) {
-      app.directive(key, list[key]);
+    for (const key in group) {
+      app.directive(key, group[key]);
     }
   }
 };

src/lang/modules/enUS.ts

@@ -99,6 +99,10 @@ export default {
     ["permission"]: "permission",
     ["btn-perm"]: "btn perm",
     ["admin-page"]: "admin page",
-    ["common-page"]: "common page"
+    ["common-page"]: "common page",
+    ["functions"]: "functions",
+    ["routing-operation"]: "routing operation",
+    ["test-common-route"]: "test common route",
+    ["test-dynamic-route"]: "test dynamic route"
   }
 };

src/lang/modules/zhCN.ts

@@ -99,6 +99,10 @@ export default {
     ["permission"]: "权限测试",
     ["btn-perm"]: "按钮权限",
     ["admin-page"]: "管理员页面",
-    ["common-page"]: "普通角色页面"
+    ["common-page"]: "普通角色页面",
+    ["functions"]: "常用功能",
+    ["routing-operation"]: "路由操作",
+    ["test-common-route"]: "测试普通路由",
+    ["test-dynamic-route"]: "测试动态路由"
   }
 };

src/layout/components/Tabs/index.vue

@@ -62,6 +62,8 @@ const { tabsList, currentRoute } = storeToRefs(routerStore);
 const onTabs = (key: string) => {
   const { findTagsList } = useRoutingMethod();
   const find = findTagsList(key);
+  console.log("点击", key, find);
+
   if (find != undefined) {
     router.push(find.path);
   }

src/mock/_data/system_menu.ts

@@ -761,6 +761,48 @@ export const systemMenu = [
   {
     id: "09",
     parentId: "0",
+    path: "/functions",
+    name: "functions",
+    redirect: "/functions",
+    meta: {
+      title: "functions",
+      hide: false,
+      disable: false,
+      keepAlive: true,
+      affix: false,
+      link: "",
+      iframe: false,
+      roles: ["admin"],
+      svgIcon: "functions",
+      sort: 9,
+      type: 1
+    },
+    children: null
+  },
+  {
+    id: "0901",
+    parentId: "09",
+    path: "/functions/routing-operation",
+    name: "routing-operation",
+    component: "functions/routing-operation/index",
+    meta: {
+      title: "routing-operation",
+      hide: false,
+      disable: false,
+      keepAlive: true,
+      affix: false,
+      link: "",
+      iframe: false,
+      roles: ["admin"],
+      icon: "icon-menu",
+      sort: 1,
+      type: 2
+    },
+    children: null
+  },
+  {
+    id: "10",
+    parentId: "0",
     path: "/system",
     name: "system",
     redirect: "/system/account",
@@ -774,14 +816,14 @@ export const systemMenu = [
       iframe: false,
       roles: ["admin"],
       svgIcon: "set",
-      sort: 9,
+      sort: 10,
       type: 1
     },
     children: null
   },
   {
-    id: "0901",
-    parentId: "09",
+    id: "1001",
+    parentId: "10",
     path: "/system/account",
     name: "account",
     component: "system/account/account",
@@ -801,8 +843,8 @@ export const systemMenu = [
     children: null
   },
   {
-    id: "0902",
-    parentId: "09",
+    id: "1002",
+    parentId: "10",
     path: "/system/role",
     name: "role",
     component: "system/role/role",
@@ -822,8 +864,8 @@ export const systemMenu = [
     children: null
   },
   {
-    id: "0903",
-    parentId: "09",
+    id: "1003",
+    parentId: "10",
     path: "/system/menu",
     name: "menu",
     component: "system/menu/menu",
@@ -843,8 +885,8 @@ export const systemMenu = [
     children: null
   },
   {
-    id: "0904",
-    parentId: "09",
+    id: "1004",
+    parentId: "10",
     path: "/system/division",
     name: "division",
     component: "system/division/division",
@@ -864,8 +906,8 @@ export const systemMenu = [
     children: null
   },
   {
-    id: "0905",
-    parentId: "09",
+    id: "1005",
+    parentId: "10",
     path: "/system/dictionary",
     name: "dictionary",
     component: "system/dictionary/dictionary",
@@ -885,8 +927,8 @@ export const systemMenu = [
     children: null
   },
   {
-    id: "0906",
-    parentId: "09",
+    id: "1006",
+    parentId: "10",
     path: "/system/log",
     name: "log",
     component: "system/log/log",
@@ -906,7 +948,7 @@ export const systemMenu = [
     children: null
   },
   {
-    id: "10",
+    id: "11",
     parentId: "0",
     path: "/disable-menu",
     name: "disable-menu",
@@ -921,13 +963,13 @@ export const systemMenu = [
       iframe: false,
       roles: ["admin"],
       svgIcon: "switch",
-      sort: 10,
+      sort: 11,
       type: 2
     },
     children: null
   },
   {
-    id: "11",
+    id: "12",
     parentId: "0",
     path: "/hide-menu",
     name: "hide-menu",
@@ -942,13 +984,13 @@ export const systemMenu = [
       iframe: false,
       roles: ["admin"],
       svgIcon: "switch",
-      sort: 11,
+      sort: 12,
       type: 2
     },
     children: null
   },
   {
-    id: "12",
+    id: "13",
     parentId: "0",
     path: "/permission",
     name: "permission",
@@ -963,14 +1005,14 @@ export const systemMenu = [
       iframe: false,
       roles: ["admin", "common"],
       svgIcon: "defend",
-      sort: 12,
+      sort: 13,
       type: 1
     },
     children: null
   },
   {
-    id: "1201",
-    parentId: "12",
+    id: "1301",
+    parentId: "13",
     path: "/permission/btn-perm",
     name: "btn-perm",
     component: "permission/btn-perm/btn-perm",
@@ -990,8 +1032,8 @@ export const systemMenu = [
     children: null
   },
   {
-    id: "1202",
-    parentId: "12",
+    id: "1302",
+    parentId: "13",
     path: "/permission/admin-page",
     name: "admin-page",
     component: "permission/admin-page/admin-page",
@@ -1011,8 +1053,8 @@ export const systemMenu = [
     children: null
   },
   {
-    id: "1203",
-    parentId: "12",
+    id: "1303",
+    parentId: "13",
     path: "/permission/common-page",
     name: "common-page",
     component: "permission/common-page/common-page",
@@ -1032,7 +1074,7 @@ export const systemMenu = [
     children: null
   },
   {
-    id: "13",
+    id: "14",
     parentId: "0",
     path: "/link",
     name: "link",
@@ -1047,14 +1089,14 @@ export const systemMenu = [
       iframe: false,
       roles: ["admin"],
       svgIcon: "link",
-      sort: 13,
+      sort: 14,
       type: 1
     },
     children: null
   },
   {
-    id: "1301",
-    parentId: "13",
+    id: "1401",
+    parentId: "14",
     path: "/link/internal",
     name: "internal",
     redirect: "/link/internal/uigradients",
@@ -1074,8 +1116,8 @@ export const systemMenu = [
     children: null
   },
   {
-    id: "130101",
-    parentId: "1301",
+    id: "140101",
+    parentId: "1401",
     path: "/link/internal/uigradients",
     name: "uigradients",
     component: "link/internal/internal",
@@ -1095,8 +1137,8 @@ export const systemMenu = [
     children: null
   },
   {
-    id: "130102",
-    parentId: "1301",
+    id: "140102",
+    parentId: "1401",
     path: "/link/internal/color-taking-tool",
     name: "color-taking-tool",
     component: "link/internal/internal",
@@ -1116,8 +1158,8 @@ export const systemMenu = [
     children: null
   },
   {
-    id: "130103",
-    parentId: "1301",
+    id: "140103",
+    parentId: "1401",
     path: "/link/internal/grid-generator",
     name: "grid-generator",
     component: "link/internal/internal",
@@ -1137,8 +1179,8 @@ export const systemMenu = [
     children: null
   },
   {
-    id: "1302",
-    parentId: "13",
+    id: "1402",
+    parentId: "14",
     path: "/link/external",
     name: "external",
     redirect: "/link/external/link-vue",
@@ -1158,8 +1200,8 @@ export const systemMenu = [
     children: null
   },
   {
-    id: "130201",
-    parentId: "1302",
+    id: "140201",
+    parentId: "1402",
     path: "/link/external/SnowAdmin-Docs",
     name: "SnowAdmin-Docs",
     component: "link/external/external",
@@ -1179,8 +1221,8 @@ export const systemMenu = [
     children: null
   },
   {
-    id: "130202",
-    parentId: "1302",
+    id: "140202",
+    parentId: "1402",
     path: "/link/external/vue",
     name: "vue",
     component: "link/external/external",
@@ -1200,8 +1242,8 @@ export const systemMenu = [
     children: null
   },
   {
-    id: "130203",
-    parentId: "1302",
+    id: "140203",
+    parentId: "1402",
     path: "/link/external/vite",
     name: "vite",
     component: "link/external/external",
@@ -1221,8 +1263,8 @@ export const systemMenu = [
     children: null
   },
   {
-    id: "130204",
-    parentId: "1302",
+    id: "140204",
+    parentId: "1402",
     path: "/link/external/github",
     name: "github",
     component: "link/external/external",
@@ -1242,8 +1284,8 @@ export const systemMenu = [
     children: null
   },
   {
-    id: "130205",
-    parentId: "1302",
+    id: "140205",
+    parentId: "1402",
     path: "/link/external/juejin",
     name: "juejin",
     component: "link/external/external",
@@ -1263,7 +1305,7 @@ export const systemMenu = [
     children: null
   },
   {
-    id: "14",
+    id: "15",
     parentId: "0",
     path: "/monitor",
     name: "monitor",
@@ -1278,14 +1320,14 @@ export const systemMenu = [
       iframe: false,
       roles: ["admin"],
       svgIcon: "financial-statement",
-      sort: 14,
+      sort: 15,
       type: 1
     },
     children: null
   },
   {
-    id: "1401",
-    parentId: "14",
+    id: "1501",
+    parentId: "15",
     path: "/monitor/onlineuser",
     name: "onlineuser",
     component: "monitor/onlineuser/index",
@@ -1305,8 +1347,8 @@ export const systemMenu = [
     children: null
   },
   {
-    id: "1402",
-    parentId: "14",
+    id: "1502",
+    parentId: "15",
     path: "/monitor/crontab",
     name: "crontab",
     component: "monitor/crontab/index",
@@ -1326,8 +1368,8 @@ export const systemMenu = [
     children: null
   },
   {
-    id: "1403",
-    parentId: "14",
+    id: "1503",
+    parentId: "15",
     path: "/monitor/crontab-logs",
     name: "crontab-logs",
     component: "monitor/crontab-logs/index",
@@ -1347,7 +1389,7 @@ export const systemMenu = [
     children: null
   },
   {
-    id: "15",
+    id: "16",
     parentId: "0",
     path: "/gaodemap",
     name: "gaodemap",
@@ -1362,13 +1404,13 @@ export const systemMenu = [
       iframe: true, // 区分是否内链 true内链 false外链
       roles: ["admin"],
       svgIcon: "amap",
-      sort: 15,
+      sort: 16,
       type: 2
     },
     children: null
   },
   {
-    id: "16",
+    id: "17",
     parentId: "0",
     path: "/i18n",
     name: "i18n",
@@ -1383,13 +1425,13 @@ export const systemMenu = [
       iframe: false,
       roles: ["admin", "common"],
       svgIcon: "earth",
-      sort: 16,
+      sort: 17,
       type: 2
     },
     children: null
   },
   {
-    id: "17",
+    id: "18",
     parentId: "0",
     path: "/about",
     name: "about",
@@ -1404,7 +1446,49 @@ export const systemMenu = [
       iframe: false,
       roles: ["admin", "common"],
       svgIcon: "about",
-      sort: 17,
+      sort: 18,
+      type: 2
+    },
+    children: null
+  },
+  {
+    id: "19",
+    parentId: "0",
+    path: "/test-common-route",
+    name: "test-common-route",
+    component: "test-router/test-common-route/index",
+    meta: {
+      title: "test-common-route",
+      hide: true,
+      disable: false,
+      keepAlive: true,
+      affix: false,
+      link: "",
+      iframe: false,
+      roles: ["admin"],
+      svgIcon: "switch",
+      sort: 19,
+      type: 2
+    },
+    children: null
+  },
+  {
+    id: "20",
+    parentId: "0",
+    path: "/test-dynamic-route/:name/:text",
+    name: "test-dynamic-route",
+    component: "test-router/test-dynamic-route/index",
+    meta: {
+      title: "test-dynamic-route",
+      hide: true,
+      disable: false,
+      keepAlive: true,
+      affix: false,
+      link: "",
+      iframe: false,
+      roles: ["admin"],
+      svgIcon: "switch",
+      sort: 20,
       type: 2
     },
     children: null
@@ -1414,8 +1498,8 @@ export const systemMenu = [
 // 权限数据
 export const permissionData = [
   {
-    id: "120101",
-    parentId: "1201",
+    id: "130101",
+    parentId: "1301",
     meta: {
       title: "新增按钮",
       hide: false,
@@ -1427,8 +1511,8 @@ export const permissionData = [
     }
   },
   {
-    id: "120102",
-    parentId: "1201",
+    id: "130102",
+    parentId: "1301",
     meta: {
       title: "编辑按钮",
       hide: false,
@@ -1440,8 +1524,8 @@ export const permissionData = [
     }
   },
   {
-    id: "120103",
-    parentId: "1201",
+    id: "130103",
+    parentId: "1301",
     meta: {
       title: "删除按钮",
       hide: false,
@@ -1453,8 +1537,8 @@ export const permissionData = [
     }
   },
   {
-    id: "120201",
-    parentId: "1201",
+    id: "130201",
+    parentId: "1301",
     meta: {
       title: "新增按钮-2",
       hide: false,
@@ -1466,8 +1550,8 @@ export const permissionData = [
     }
   },
   {
-    id: "120202",
-    parentId: "1201",
+    id: "130202",
+    parentId: "1301",
     meta: {
       title: "编辑按钮-2",
       hide: false,
@@ -1479,8 +1563,8 @@ export const permissionData = [
     }
   },
   {
-    id: "120203",
-    parentId: "1201",
+    id: "130203",
+    parentId: "1301",
     meta: {
       title: "删除按钮-2",
       hide: false,

src/router/index.ts

@@ -37,6 +37,7 @@ const router = createRouter({
  * 页面刷新会导致addRoute动态添加的路由失效，需要重新初始化路由
  */
 router.beforeEach(async (to: any, _: any, next: any) => {
+  console.log("去", to);
   NProgress.start(); // 开启进度条
   const store = useUserInfoStore(pinia);
   const { token, account } = storeToRefs(store);
@@ -64,7 +65,7 @@ router.beforeEach(async (to: any, _: any, next: any) => {
       await store.setAccount();
       // 获取路由信息
       await routeStore.initSetRouter();
-      next({ path: to.path, query: to.query });
+      next({ path: to.path, query: to.query, params: to.params });
     } else {
       // 获取外链路由的处理函数
       // 所有的路由正常放行，只不过额外判断是否是外链，如果是，则打开新窗口跳转外链

src/router/route-output.ts

@@ -39,6 +39,7 @@ export const currentlyRoute = (name: string) => {
 
   // 如果是外链路由则不做后续任何缓存操作，条件: 有外链 && 非内嵌
   if (find.meta.link && !find.meta.iframe) return;
+  console.log("跳转存入tabs", tabsList.value, find);
 
   // 存入tabs栏数据，条件：开启tabs
   if (isTabs.value) store.setTabs(find);

src/style/global-style.scss

@@ -38,3 +38,8 @@
   overflow: hidden;
   background: $color-fill-1;
 }
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

src/views/functions/routing-operation/index.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="snow-page">
+    <div class="snow-inner">
+      <a-row :gutter="24">
+        <a-col :span="12">
+          <a-card title="普通路由">
+            <a-alert style="width: 100%" type="success" class="content" :show-icon="false">
+              <div>1. 无需在路由配置中声明，可以随意添加任意参数</div>
+              <div>2. 参数以键值对的形式出现在 URL 的 ? 之后，用 & 分隔</div>
+              <div>3. 例如：/user?id=123&name=John，其中 id=123 和 name=John 是 query 参数</div>
+              <div>4. 参数是可选的非必填项，可以自由传递</div>
+            </a-alert>
+            <a-alert style="width: 100%" type="success" class="content" :show-icon="false">
+              <div>路由：/test-common-route</div>
+            </a-alert>
+            <a-space direction="vertical" fill>
+              <a-input placeholder="请输入路由" allow-clear disabled v-model="connom.path">
+                <template #prepend> 路由： </template>
+              </a-input>
+              <a-input placeholder="请输入参数" allow-clear v-model="connom.query.name">
+                <template #prepend> 参数： </template>
+              </a-input>
+              <a-input placeholder="请输入参数" allow-clear v-model="connom.query.text">
+                <template #prepend> 参数： </template>
+              </a-input>
+              <a-space>
+                <a-button type="primary" @click="onQuery">跳转-query</a-button>
+              </a-space>
+            </a-space>
+          </a-card>
+        </a-col>
+        <a-col :span="12">
+          <a-card title="动态匹配">
+            <a-alert style="width: 100%" type="success" class="content" :show-icon="false">
+              <div>1. 需要在路由配置中明确定义动态参数，否则参数会被忽略</div>
+              <div>2. 参数会直接体现在 URL 路径中，通常用于动态路由匹配</div>
+              <div>3. 例如：/user/123，其中 123 是 params 参数（对应路由 /user/:id）</div>
+              <div>4. 如果在路由配置中声明了动态参数（如 /:id），则参数是必填的</div>
+            </a-alert>
+            <a-alert style="width: 100%" type="success" class="content" :show-icon="false">
+              <div>路由：/test-dynamic-route/:name/:text</div>
+            </a-alert>
+            <a-space direction="vertical" fill>
+              <a-input placeholder="请输入路由" allow-clear disabled v-model="dynamic.name">
+                <template #prepend> 路由： </template>
+              </a-input>
+              <a-input placeholder="请输入参数" allow-clear v-model="dynamic.params.name">
+                <template #prepend> 参数： </template>
+              </a-input>
+              <a-input placeholder="请输入参数" allow-clear v-model="dynamic.params.text">
+                <template #prepend> 参数： </template>
+              </a-input>
+              <a-space>
+                <a-button type="primary" @click="onParams">跳转-params</a-button>
+              </a-space>
+            </a-space>
+          </a-card>
+        </a-col>
+      </a-row>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const router = useRouter();
+
+// 普通跳转
+const connom = ref({
+  path: "/test-common-route",
+  query: {
+    name: "SnowAdmin",
+    text: "月之暗面"
+  }
+});
+const onQuery = () => {
+  let route = {
+    path: connom.value.path, // 跳转路由
+    query: connom.value.query // 路由参数
+  };
+  router.push(route);
+};
+
+// 动态匹配
+const dynamic = ref({
+  name: "test-dynamic-route",
+  params: {
+    name: "SnowAdmin",
+    text: "月之暗面"
+  }
+});
+const onParams = () => {
+  try {
+    let route = {
+      name: dynamic.value.name, // 跳转路由
+      params: dynamic.value.params // 路由参数
+    };
+    router.push(route);
+  } catch {
+    arcoMessage("warning", "请完整填写参数");
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.content {
+  width: 400px;
+  margin: $margin 0;
+}
+</style>

src/views/test-router/test-common-route/index.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="snow-page">
+    <div class="snow-inner">
+      <a-card title="路由测试页">
+        <a-space direction="vertical" fill>
+          <div>路由：{{ route.path }}</div>
+          <div>参数：{{ JSON.stringify(route.query) }}</div>
+        </a-space>
+      </a-card>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const route = useRoute();
+</script>
+
+<style lang="scss" scoped></style>

src/views/test-router/test-dynamic-route/index.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="snow-page">
+    <div class="snow-inner">
+      <a-card title="路由测试页">
+        <a-space direction="vertical" fill>
+          <div>路由：{{ route.path }}</div>
+          <div>参数：{{ JSON.stringify(route.params) }}</div>
+        </a-space>
+      </a-card>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const route = useRoute();
+</script>
+
+<style lang="scss" scoped></style>