路由和菜單配置指南

路由配置

1. 添加新的路由模塊

在 src/router/modules/ 目錄下創(chuàng )建新的路由文件：

// src/router/modules/your-module.ts
export default [
  {
    path: '/your-module',
    name: 'your-module',
    component: () => import('@/layouts/index.vue'),
    meta: {
      title: '您的模塊',
      icon: 'your-icon',
      orderNo: 1,
    },
    children: [
      {
        path: 'page1',
        name: 'your-module-page1',
        component: () => import('@/pages/your-module/page1.vue'),
        meta: {
          title: '頁(yè)面1',
        },
      },
      {
        path: 'page2',
        name: 'your-module-page2',
        component: () => import('@/pages/your-module/page2.vue'),
        meta: {
          title: '頁(yè)面2',
        },
      },
    ],
  },
];

2. 修改默認路由

編輯 src/router/index.ts 文件，修改默認重定向：

const defaultRouterList: Array<RouteRecordRaw> = [
  {
    path: '/login',
    name: 'login',
    component: () => import('@/pages/login/index.vue'),
  },
  {
    path: '/',
    redirect: '/your-default-page', // 修改為您的默認頁(yè)面
  },
];

3. 路由守衛配置

在 src/permission.ts 中配置路由守衛：

import router from '@/router';
import { useUserStore } from '@/store';

router.beforeEach(async (to, from, next) => {
  const userStore = useUserStore();
  
  // 檢查登錄狀態(tài)
  if (to.path !== '/login' && !userStore.token) {
    next('/login');
    return;
  }
  
  // 檢查權限
  if (to.meta.roles && !hasRole(to.meta.roles)) {
    next('/403');
    return;
  }
  
  next();
});

側邊欄菜單配置

1. 菜單圖標

TDesign 提供了豐富的圖標，您可以在路由的 meta 中配置：

meta: {
  title: '菜單名稱(chēng)',
  icon: 'dashboard', // TDesign 圖標名稱(chēng)
}

常用圖標：

• dashboard - 儀表板
• user - 用戶(hù)
• setting - 設置
• list - 列表
• form - 表單
• chart - 圖表
• table - 表格

2. 菜單排序

通過(guò) orderNo 字段控制菜單順序：

meta: {
  title: '菜單名稱(chēng)',
  icon: 'dashboard',
  orderNo: 1, // 數字越小越靠前
}

3. 隱藏菜單

meta: {
  title: '隱藏菜單',
  hidden: true, // 在側邊欄中隱藏
}

4. 菜單分組

meta: {
  title: '菜單名稱(chēng)',
  icon: 'dashboard',
  group: '系統管理', // 菜單分組
}

5. 外鏈菜單

{
  path: '/external-link',
  meta: {
    title: '外部鏈接',
    icon: 'link',
    isExternal: true,
    externalLink: 'https://example.com',
  },
}

面包屑配置

1. 啟用面包屑

在路由 meta 中配置：

meta: {
  title: '頁(yè)面標題',
  breadcrumb: true, // 啟用面包屑
}

2. 自定義面包屑

meta: {
  title: '頁(yè)面標題',
  breadcrumb: [
    { title: '首頁(yè)', path: '/' },
    { title: '用戶(hù)管理', path: '/user' },
    { title: '用戶(hù)列表' }, // 當前頁(yè)面，不需要path
  ],
}

標簽頁(yè)配置

1. 啟用標簽頁(yè)

meta: {
  title: '頁(yè)面標題',
  keepAlive: true, // 啟用頁(yè)面緩存
  affix: true, // 固定標簽頁(yè)，不可關(guān)閉
}

2. 動(dòng)態(tài)標題

// 在組件中動(dòng)態(tài)設置標題
import { useRoute } from 'vue-router';

const route = useRoute();

// 設置動(dòng)態(tài)標題
route.meta.title = `用戶(hù)詳情 - ${userId}`;

路由參數和查詢(xún)

1. 路由參數

// 路由定義
{
  path: '/user/:id',
  name: 'user-detail',
  component: () => import('@/pages/user/detail.vue'),
}

// 組件中獲取參數
const route = useRoute();
const userId = route.params.id;

2. 查詢(xún)參數

// 跳轉時(shí)傳遞查詢(xún)參數
router.push({
  name: 'user-list',
  query: {
    page: 1,
    size: 10,
    keyword: 'search',
  },
});

// 組件中獲取查詢(xún)參數
const route = useRoute();
const page = route.query.page;

路由動(dòng)畫(huà)

1. 頁(yè)面切換動(dòng)畫(huà)

在 App.vue 中配置：

<template>
  <router-view v-slot="{ Component, route }">
    <transition name="fade" mode="out-in">
      <component :is="Component" :key="route.path" />
    </transition>
  </router-view>
</template>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

2. 不同的動(dòng)畫(huà)效果

/* 滑動(dòng)動(dòng)畫(huà) */
.slide-enter-active,
.slide-leave-active {
  transition: transform 0.3s ease;
}

.slide-enter-from {
  transform: translateX(100%);
}

.slide-leave-to {
  transform: translateX(-100%);
}

/* 縮放動(dòng)畫(huà) */
.scale-enter-active,
.scale-leave-active {
  transition: transform 0.3s ease;
}

.scale-enter-from,
.scale-leave-to {
  transform: scale(0.8);
}

錯誤頁(yè)面配置

1. 404頁(yè)面

{
  path: '/:pathMatch(.*)*',
  name: 'not-found',
  component: () => import('@/pages/error/404.vue'),
  meta: {
    title: '頁(yè)面不存在',
    hidden: true,
  },
}

2. 403權限頁(yè)面

{
  path: '/403',
  name: 'forbidden',
  component: () => import('@/pages/error/403.vue'),
  meta: {
    title: '無(wú)權限訪(fǎng)問(wèn)',
    hidden: true,
  },
}

3. 500錯誤頁(yè)面

{
  path: '/500',
  name: 'server-error',
  component: () => import('@/pages/error/500.vue'),
  meta: {
    title: '服務(wù)器錯誤',
    hidden: true,
  },
}