feat: change router operation path to name

eslint.config.js

@@ -1,5 +1,5 @@
 // @ts-check
-import config from '@daotl/eslint-config'
+import { config } from '@daotl/eslint-config'
 
 export default config({
   unocss: true,

src/directive/permission/index.ts

@@ -11,7 +11,9 @@ export const hasPerm: Directive = {
     const { value: requiredPerms } = binding
     if (requiredPerms) {
       if (!hasAuth(requiredPerms)) {
-        el.parentNode && el.parentNode.removeChild(el)
+        if (el.parentNode) {
+          el.parentNode.removeChild(el)
+        }
       }
     }
     else {
@@ -31,7 +33,9 @@ export const hasRole: Directive = {
     const { value: requiredRoles } = binding
     if (requiredRoles) {
       if (!hasAuth(requiredRoles, 'role')) {
-        el.parentNode && el.parentNode.removeChild(el)
+        if (el.parentNode) {
+          el.parentNode.removeChild(el)
+        }
       }
     }
     else {

src/layout/components/Sidebar/components/SidebarMenu.vue

@@ -70,7 +70,7 @@ watch(
 <template>
   <el-menu
     ref="menuRef"
-    :default-active="currentRoute.path"
+    :default-active="currentRoute.name"
     :collapse="!appStore.sidebar.opened"
     :background-color="variables['menu-background']"
     :text-color="variables['menu-text']"

src/layout/components/Sidebar/components/SidebarMenuItem.vue

@@ -76,8 +76,7 @@ function resolvePath(routePath: string) {
   }
 
   // 完整路径(/system/user) = 父级路径(/system) + 路由路径(user)
-  const fullPath = path.resolve(props.basePath, routePath)
-  return fullPath
+  return path.resolve(props.basePath, routePath)
 }
 </script>
 
@@ -95,12 +94,13 @@ function resolvePath(routePath: string) {
       <AppLink
         v-if="onlyOneChild.meta"
         :to="{
+          name: onlyOneChild.name,
           path: resolvePath(onlyOneChild.path),
           query: onlyOneChild.meta.params,
         }"
       >
         <el-menu-item
-          :index="resolvePath(onlyOneChild.path)"
+          :index="onlyOneChild.name"
           :class="{ 'submenu-title-noDropdown': !isNest }"
         >
           <SidebarMenuItemTitle
@@ -112,7 +112,7 @@ function resolvePath(routePath: string) {
     </template>
 
     <!-- 显示具有多个子路由的父菜单项 -->
-    <el-sub-menu v-else :index="resolvePath(item.path)" teleported>
+    <el-sub-menu v-else :index="item.name" teleported>
       <template #title>
         <SidebarMenuItemTitle
           v-if="item.meta"
@@ -123,7 +123,7 @@ function resolvePath(routePath: string) {
 
       <SidebarMenuItem
         v-for="child in item.children"
-        :key="child.path"
+        :key="child.name"
         :is-nest="true"
         :item="child"
         :base-path="resolvePath(child.path)"

src/layout/components/Sidebar/components/SidebarMixTopMenu.vue

@@ -23,9 +23,9 @@ const mixTopMenus = ref<RouteRecordRaw[]>([])
 /**
  * 菜单选择事件
  */
-function handleMenuSelect(routePath: string) {
-  appStore.activeTopMenu(routePath)
-  permissionStore.setMixLeftMenus(routePath)
+function handleMenuSelect(routeName: string) {
+  appStore.activeTopMenu(routeName)
+  permissionStore.setMixLeftMenus(routeName)
   // 获取左侧菜单集合，默认跳转到第一个菜单
   const mixLeftMenus = permissionStore.mixLeftMenus
   goToFirstMenu(mixLeftMenus)
@@ -69,7 +69,7 @@ onMounted(() => {
       :active-text-color="variables['menu-active-text']"
       @select="handleMenuSelect"
     >
-      <el-menu-item v-for="route in mixTopMenus" :key="route.path" :index="route.path">
+      <el-menu-item v-for="route in mixTopMenus" :key="route.name" :index="route.name">
         <template #title>
           <svg-icon v-if="route.meta && route.meta.icon" :icon-class="route.meta.icon" />
           <span v-if="route.path === '/'">首页</span>

src/layout/components/TagsView/index.vue

@@ -281,8 +281,8 @@ function againActiveTop(newVal: string) {
     return
   }
   const parent = findOutermostParent(permissionStore.routes, newVal)
-  if (parent?.path && appStore.activeTopMenuPath !== parent.path) {
-    appStore.activeTopMenu(parent.path)
+  if (parent?.name && appStore.activeTopMenuName !== parent.name) {
+    appStore.activeTopMenu(parent.name)
   }
 }
 // 如果是混合模式，更改selectedTag，需要对应高亮的activeTop
@@ -313,7 +313,7 @@ onMounted(() => {
         v-for="tag in visitedViews"
         :key="tag.fullPath"
         :class="`tags-item ${tagsViewStore.isActive(tag) ? 'active' : ''}`"
-        :to="{ path: tag.path, query: tag.query }"
+        :to="{ name: tag.name, query: tag.query }"
         @click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
         @contextmenu.prevent="openContentMenu(tag, $event)"
       >

src/layout/index.vue

@@ -15,11 +15,11 @@ const isOpenSidebar = computed(() => appStore.sidebar.opened)
 const fixedHeader = computed(() => settingsStore.fixedHeader) // 是否固定header
 const showTagsView = computed(() => settingsStore.tagsView) // 是否显示tagsView
 const layout = computed(() => settingsStore.layout) // 布局模式 left top mix
-const activeTopMenuPath = computed(() => appStore.activeTopMenuPath) // 顶部菜单激活path
+const activeTopMenuName = computed(() => appStore.activeTopMenuName) // 顶部菜单激活path
 const mixLeftMenus = computed(() => permissionStore.mixLeftMenus) // 混合布局左侧菜单
 
 watch(
-  () => activeTopMenuPath.value,
+  () => activeTopMenuName.value,
   (newVal) => {
     permissionStore.setMixLeftMenus(newVal)
   },
@@ -79,7 +79,7 @@ watch(route, () => {
     <!-- 混合布局 -->
     <div v-if="layout === LayoutEnum.MIX" class="mix-container">
       <div class="mix-container__left">
-        <SidebarMenu :menu-list="mixLeftMenus" :base-path="activeTopMenuPath" />
+        <SidebarMenu :menu-list="mixLeftMenus" :base-path="activeTopMenuName" />
         <div class="sidebar-toggle">
           <hamburger
             :is-active="appStore.sidebar.opened"

src/router/index.ts

@@ -8,6 +8,7 @@ export const Layout = () => import('~/layout/index.vue')
 export const constantRoutes: RouteRecordRaw[] = [
   {
     path: '/redirect',
+    name: 'Redirect',
     component: Layout,
     meta: { hidden: true },
     children: [
@@ -20,6 +21,7 @@ export const constantRoutes: RouteRecordRaw[] = [
 
   {
     path: '/login',
+    name: 'Login',
     component: () => import('~/views/login/index.vue'),
     meta: { hidden: true },
   },
@@ -43,13 +45,53 @@ export const constantRoutes: RouteRecordRaw[] = [
           keepAlive: true,
         },
       },
+      {
+        path: 'dashboard1',
+        component: () => import('~/views/dashboard/index.vue'),
+        // 用于 keep-alive 功能，需要与 SFC 中自动推导或显式声明的组件名称一致
+        // 参考文档: https://cn.vuejs.org/guide/built-ins/keep-alive.html#include-exclude
+        name: 'Dashboard1',
+        meta: {
+          title: 'dashboard1',
+          icon: 'homepage',
+          keepAlive: true,
+        },
+        children: [
+          {
+            path: 'dashboard2',
+            component: () => import('~/views/dashboard/index.vue'),
+            // 用于 keep-alive 功能，需要与 SFC 中自动推导或显式声明的组件名称一致
+            // 参考文档: https://cn.vuejs.org/guide/built-ins/keep-alive.html#include-exclude
+            name: 'Dashboard2',
+            meta: {
+              title: 'dashboard2',
+              icon: 'homepage',
+              keepAlive: true,
+            },
+          },
+          {
+            path: 'dashboard3',
+            component: () => import('~/views/dashboard/index.vue'),
+            // 用于 keep-alive 功能，需要与 SFC 中自动推导或显式声明的组件名称一致
+            // 参考文档: https://cn.vuejs.org/guide/built-ins/keep-alive.html#include-exclude
+            name: 'Dashboard3',
+            meta: {
+              title: 'dashboard3',
+              icon: 'homepage',
+              keepAlive: true,
+            },
+          },
+        ],
+      },
       {
         path: '401',
+        name: '401',
         component: () => import('~/views/error-page/401.vue'),
         meta: { hidden: true },
       },
       {
         path: '404',
+        name: '404',
         component: () => import('~/views/error-page/404.vue'),
         meta: { hidden: true },
       },

src/store/modules/app.ts

@@ -22,7 +22,7 @@ export const useAppStore = defineStore('app', () => {
   })
 
   // 顶部菜单激活路径
-  const activeTopMenuPath = useStorage('activeTopMenuPath', '')
+  const activeTopMenuName = useStorage('activeTopMenuName', '')
 
   /**
    * 根据语言标识读取对应的语言包
@@ -81,7 +81,7 @@ export const useAppStore = defineStore('app', () => {
    * 混合模式顶部切换
    */
   function activeTopMenu(val: string) {
-    activeTopMenuPath.value = val
+    activeTopMenuName.value = val
   }
   return {
     device,
@@ -96,7 +96,7 @@ export const useAppStore = defineStore('app', () => {
     toggleSidebar,
     closeSideBar,
     openSideBar,
-    activeTopMenuPath,
+    activeTopMenuName,
   }
 })
 

src/store/modules/permission.ts

@@ -26,11 +26,11 @@ export const usePermissionStore = defineStore<'permission', PermissionState>(
     /**
      * 混合模式菜单下根据顶部菜单路径设置左侧菜单
      *
-     * @param topMenuPath - 顶部菜单路径
+     * @param topMenuName - 顶部菜单路径
      */
-    const setMixLeftMenus = (topMenuPath: string): void => {
+    const setMixLeftMenus = (topMenuName: string): void => {
       const matchedItem = routes.value.find(
-        item => item.path === topMenuPath,
+        item => item.name === topMenuName,
       )
       if (matchedItem && matchedItem.children) {
         mixLeftMenus.value = matchedItem.children

src/store/modules/tagsView.ts

@@ -9,7 +9,7 @@ export const useTagsViewStore = defineStore('tagsView', () => {
    */
   function addVisitedView(view: TagView) {
     // 如果已经存在于已访问的视图列表中，则不再添加
-    if (visitedViews.value.some(v => v.path === view.path)) {
+    if (visitedViews.value.some(v => v.name === view.name)) {
       return
     }
     // 如果视图是固定的（affix），则在已访问的视图列表的开头添加
@@ -45,7 +45,7 @@ export const useTagsViewStore = defineStore('tagsView', () => {
     return new Promise((resolve) => {
       for (const [i, v] of visitedViews.value.entries()) {
         // 找到与指定视图路径匹配的视图，在已访问视图列表中删除该视图
-        if (v.path === view.path) {
+        if (v.name === view.name) {
           visitedViews.value.splice(i, 1)
           break
         }
@@ -58,15 +58,17 @@ export const useTagsViewStore = defineStore('tagsView', () => {
     const viewName = view.name
     return new Promise((resolve) => {
       const index = cachedViews.value.indexOf(viewName)
-      index > -1 && cachedViews.value.splice(index, 1)
+      if (index > -1) {
+        cachedViews.value.splice(index, 1)
+      }
       resolve([...cachedViews.value])
     })
   }
 
   function delOtherVisitedViews(view: TagView) {
     return new Promise((resolve) => {
       visitedViews.value = visitedViews.value.filter((v) => {
-        return v?.affix || v.path === view.path
+        return v?.affix || v.name === view.name
       })
       resolve([...visitedViews.value])
     })
@@ -89,7 +91,7 @@ export const useTagsViewStore = defineStore('tagsView', () => {
 
   function updateVisitedView(view: TagView) {
     for (let v of visitedViews.value) {
-      if (v.path === view.path) {
+      if (v.name === view.name) {
         v = Object.assign(v, view)
         break
       }
@@ -134,7 +136,7 @@ export const useTagsViewStore = defineStore('tagsView', () => {
   function delLeftViews(view: TagView) {
     return new Promise<{ visitedViews: TagView[] }>((resolve) => {
       const currIndex = visitedViews.value.findIndex(
-        v => v.path === view.path,
+        v => v.name === view.name,
       )
       if (currIndex === -1) {
         return
@@ -159,7 +161,7 @@ export const useTagsViewStore = defineStore('tagsView', () => {
   function delRightViews(view: TagView) {
     return new Promise<{ visitedViews: TagView[] }>((resolve) => {
       const currIndex = visitedViews.value.findIndex(
-        v => v.path === view.path,
+        v => v.name === view.name,
       )
       if (currIndex === -1) {
         return
@@ -226,7 +228,7 @@ export const useTagsViewStore = defineStore('tagsView', () => {
   }
 
   function isActive(tag: TagView) {
-    return tag.path === route.path
+    return tag.name === route.name
   }
 
   function toLastView(visitedViews: TagView[], view?: TagView) {

src/store/modules/user.ts

@@ -27,7 +27,7 @@ export const useUserStore = defineStore('user', () => {
           resolve()
         })
         .catch((error) => {
-          reject(error)
+          reject(error as Error)
         })
     })
   }
@@ -38,20 +38,18 @@ export const useUserStore = defineStore('user', () => {
       UserAPI.getInfo()
         .then((data) => {
           if (!data) {
-            // eslint-disable-next-line prefer-promise-reject-errors
-            reject('Verification failed, please Login again.')
+            reject(new Error('Verification failed, please Login again.'))
             return
           }
           if (!data.roles || data.roles.length <= 0) {
-            // eslint-disable-next-line prefer-promise-reject-errors
-            reject('getUserInfo: roles must be a non-null array!')
+            reject(new Error('getUserInfo: roles must be a non-null array!'))
             return
           }
           Object.assign(user.value, { ...data })
           resolve(data)
         })
         .catch((error) => {
-          reject(error)
+          reject(error as Error)
         })
     })
   }
@@ -66,7 +64,7 @@ export const useUserStore = defineStore('user', () => {
           resolve()
         })
         .catch((error) => {
-          reject(error)
+          reject(error as Error)
         })
     })
   }

src/utils/request.ts

@@ -29,8 +29,8 @@ service.interceptors.request.use(
     }
     return config
   },
-  (error: unknown) => {
-    return Promise.reject(error)
+  (error) => {
+    return Promise.reject(error as Error)
   },
 )
 
@@ -78,7 +78,7 @@ service.interceptors.response.use(
         ElMessage.error(msg || '系统出错')
       }
     }
-    return Promise.reject(error.message)
+    return Promise.reject(error)
   },
 )