文章目錄
- 注意
- 效果圖
- 目錄結構
- 代碼
- vite.config.ts需要配置路徑別名@符號
- main.ts
- App.vue
- Breadcrumb.vue面包屑組件
- menus.ts
- // src/router/index.ts
- 其他文件
注意
- 目錄結構僅供參考
- DefaultLayout.vue 沒有用到，我直接寫在APP文件中
- vux-store我也沒有用到，單獨寫了一個配置文件存儲菜單數據
- 詳細代碼需要參考后面貼出來的實際代碼
效果圖
目錄結構
src/
├── views/
│ ├── user/ # 用戶管理模塊
│ │ ├── UserList.vue # 用戶列表頁面（主頁面）
│ │ ├── UserDetails.vue # 用戶詳情頁面（子頁面）
│ │ ├── UserEdit.vue # 用戶編輯頁面（子頁面）
│ │ └── UserSettings.vue # 用戶設置頁面（子頁面）
│ │
│ ├── role/ # 用戶角色管理模塊
│ │ └── UserRole.vue # 用戶角色管理頁面
│ │
│ ├── permission/ # 權限管理模塊
│ │ ├── PermissionList.vue # 權限列表頁面（主頁面）
│ │ ├── PermissionAdd.vue # 權限添加頁面（子頁面）
│ │ └── PermissionSetting.vue # 權限設置頁面（子頁面）
│ │
│ └── layout/ # 布局組件
│ └── DefaultLayout.vue （沒有） # 主布局，包含菜單和面包屑導航
│
├── router/
│ └── index.js # 路由配置文件
│
├── store/
│ └── modules/
│ └── menu.js （沒有） # 動態菜單狀態管理
│
└── components/└── breadcrumb/ # 面包屑組件└── Breadcrumb.vue
用戶管理└── 用戶列表（含詳情、編輯）└── 用戶角色管理└── 用戶設置└── 偏好設置（有編輯頁）└── 安全設置（有修改頁）
src/
├── pages/
│ ├── user/
│ │ ├── UserList.vue
│ │ ├── UserDetails.vue
│ │ ├── UserEdit.vue
│ │ ├── UserSettings.vue # 用戶設置主頁面
│ │ ├── preferences/
│ │ │ ├── PreferenceSettings.vue # 偏好設置頁面
│ │ │ └── PreferenceEdit.vue # 偏好編輯頁面
│ │ └── security/
│ │ ├── SecuritySettings.vue # 安全設置頁面
│ │ └── SecurityModify.vue # 安全修改頁面
│ ├── role/
│ │ └── UserRole.vue
│ └── permission/
│ └── ...
代碼
vite.config.ts需要配置路徑別名@符號
import path from 'node:path'
import Vue from '@vitejs/plugin-vue'import Unocss from 'unocss/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import Components from 'unplugin-vue-components/vite'
import VueRouter from 'unplugin-vue-router/vite'import { defineConfig } from 'vite'// https://vitejs.dev/config/
export default defineConfig({resolve: {alias: {'@/': `${path.resolve(__dirname, 'src')}/`,},},css: {preprocessorOptions: {scss: {additionalData: `@use "@/styles/element/index.scss" as *;`,api: 'modern-compiler',},},},plugins: [Vue(),// https://github.com/posva/unplugin-vue-routerVueRouter({extensions: ['.vue', '.md'],dts: 'src/typed-router.d.ts',}),Components({// allow auto load markdown components under `./src/components/`extensions: ['vue', 'md'],// allow auto import and register components used in markdowninclude: [/\.vue$/, /\.vue\?vue/, /\.md$/],resolvers: [ElementPlusResolver({importStyle: 'sass',}),],dts: 'src/components.d.ts',}),// https://github.com/antfu/unocss// see uno.config.ts for configUnocss(),],ssr: {// TODO: workaround until they support native ESMnoExternal: ['element-plus'],},
})main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import '@/styles/index.scss'
import 'uno.css'// If you want to use ElMessage, import it.
import 'element-plus/theme-chalk/src/message.scss'
import 'element-plus/theme-chalk/src/message-box.scss'const app = createApp(App)app.use(router)
app.use(ElementPlus)app.mount('#app')
App.vue
<!-- src/App.vue -->
<template><el-container class="layout-container"><!-- 左側側邊欄 --><el-aside width="200px" class="layout-aside"><el-menudefault-active="$route.path"routerclass="side-menu"background-color="#ffffff"text-color="#333"active-text-color="#409EFF"><!-- 動態生成菜單 --><div v-for="menu in menus" :key="menu.title"><el-sub-menu :index="menu.title" v-if="menu.children && menu.children.length"><template #title>{{ menu.title }}</template><el-menu-itemv-for="child in menu.children":key="child.path":index="child.path">{{ child.title || child.path }}</el-menu-item></el-sub-menu></div></el-menu></el-aside><!-- 右側主內容區域 --><el-container class="layout-main"><!-- 頂部欄 --><el-header class="layout-header"><div class="header-title">智能控制器后臺系統</div><div class="header-right"><span>管理員</span><el-avatar icon="UserFilled" size="small" /></div></el-header><!-- 面包屑導航 --><el-header class="layout-breadcrumb"><Breadcrumb /></el-header><!-- 頁面主體內容 --><el-main class="layout-content"><router-view /></el-main></el-container></el-container>
</template><script setup>import Breadcrumb from './components/breadcrumb/Breadcrumb.vue';
import { menus } from '@/config/menu';</script><style scoped>
.layout-container {height: 100vh;
}.layout-aside {background-color: #fff;border-right: 1px solid #e4e7ed;
}.layout-main {flex-direction: column;
}.layout-header {display: flex;justify-content: space-between;align-items: center;background-color: #ffffff;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);padding: 0 20px;
}.header-title {font-size: 18px;font-weight: bold;
}.layout-breadcrumb {padding: 10px 20px;background-color: #f5f7fa;border-bottom: 1px solid #e4e7ed;
}.layout-content {padding: 20px;background-color: #f9fafb;
}
</style>
Breadcrumb.vue面包屑組件
<template><el-breadcrumb separator="/"><el-breadcrumb-item v-for="item in breadcrumbs" :to="item.path" :key="item.path">{{ item.meta?.title }}</el-breadcrumb-item></el-breadcrumb>
</template><script setup>
import { ref, onMounted, watch } from 'vue';
import { useRoute } from 'vue-router';const route = useRoute();
const breadcrumbs = ref([]);const getBreadcrumbs = () => {const matched = route.matched.filter(item => item.meta?.title);breadcrumbs.value = matched;console.log('breadcrumbs:', breadcrumbs.value);
};// 頁面加載時獲取一次
onMounted(() => {getBreadcrumbs();
});// 監聽路由路徑變化，動態更新面包屑
watch(() => route.path,() => {getBreadcrumbs();}
);
</script>
menus.ts
export const menus = [{title: '用戶管理',children: [{ title: '用戶列表', path: '/user/list' },{ title: '用戶角色管理', path: '/user/role' }]},{title: '權限管理',children: [{ title: '權限列表', path: '/permission/list' }]}]
// src/router/index.ts
// src/router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
// import { CustomRoute } from '@/types/router';
export interface CustomRouteMeta {title: string;
}export type CustomRoute = Omit<RouteRecordRaw, 'meta' | 'children'> & {meta: CustomRouteMeta;children?: CustomRoute[];
};
const routes: CustomRoute[] = [{path: '/',redirect: '/user/list',meta: { title: '首頁' },children: [// 用戶管理 - 父級{path: '/user',redirect: '/user/list',meta: { title: '用戶管理' },children: [{path: 'list',component: () => import('@/pages/user/UserList.vue'),meta: { title: '用戶列表' }},{path: 'details/:id',component: () => import('@/pages/user/UserDetails.vue'),meta: { title: '用戶詳情' }},{path: 'edit/:id',component: () => import('@/pages/user/UserEdit.vue'),meta: { title: '用戶編輯' }},{path: 'settings',component: () => import('@/pages/user/UserSettings.vue'),meta: { title: '用戶設置' }},{path: 'role',component: () => import('@/pages/role/UserRole.vue'),meta: { title: '用戶角色管理' }},{path: 'preferences',redirect: '/user/preferences/settings',meta: { title: '偏好設置' },children: [{path: 'settings',component: () => import('@/pages/user/preferences/PreferenceSettings.vue'),meta: { title: '偏好設置' }},{path: 'edit',component: () => import('@/pages/user/preferences/PreferenceEdit.vue'),meta: { title: '偏好編輯' }}]},{path: 'security',redirect: '/user/security/settings',meta: { title: '安全設置' },children: [{path: 'settings',component: () => import('@/pages/user/security/SecuritySettings.vue'),meta: { title: '安全設置' }},{path: 'modify',component: () => import('@/pages/user/security/SecurityModify.vue'),meta: { title: '安全修改' }}]}]},// 權限管理 - 父級{path: '/permission',redirect: '/permission/list',meta: { title: '權限管理' },children: [{path: 'list',component: () => import('@/pages/permission/PermissionList.vue'),meta: { title: '權限列表' }},{path: 'add',component: () => import('@/pages/permission/PermissionAdd.vue'),meta: { title: '權限添加' }},{path: 'setting',component: () => import('@/pages/permission/PermissionSetting.vue'),meta: { title: '權限設置' }}]}]},{path: '/:pathMatch(.*)*',name: 'NotFound',component: () => import('@/pages/error/404.vue'),meta: { title: '頁面不存在' }}
];const router = createRouter({history: createWebHistory(),routes:routes as unknown as RouteRecordRaw[]
});export default router;
其他文件
│ │ ├── UserList.vue
│ │ ├── UserDetails.vue
│ │ ├── UserEdit.vue
│ │ ├── UserSettings.vue # 用戶設置主頁面
│ │ ├── preferences/
│ │ │ ├── PreferenceSettings.vue # 偏好設置頁面
│ │ │ └── PreferenceEdit.vue # 偏好編輯頁面
│ │ └── security/
│ │ ├── SecuritySettings.vue # 安全設置頁面
│ │ └── SecurityModify.vue # 安全修改頁面
│ │ ├── UserList.vue
<template><div><h2>用戶列表</h2><button @click="goToDetail">查看用戶詳情</button><button @click="goToEdit">編輯用戶信息</button><button @click="goToSettings">用戶設置</button></div>
</template><script setup>
import { useRouter } from 'vue-router';const router = useRouter();
const goToDetail = () => router.push('/user/details/1');
const goToEdit = () => router.push('/user/edit/1');
const goToSettings = () => router.push('/user/settings');
</script>
│ │ ├── UserDetails.vue
<template><h1>用戶詳情</h1>
</template>
│ │ ├── UserEdit.vue
<template><h1>用戶編輯</h1>
</template>
│ │ ├── UserSettings.vue # 用戶設置主頁面
<template><div><h2>用戶設置</h2><router-link to="/user/preferences/settings"><el-button>進入偏好設置</el-button></router-link><router-link to="/user/security/settings"><el-button>進入安全設置</el-button></router-link><router-view /></div>
</template>
<script setup></script>
│ │ ├── preferences/
│ │ │ ├── PreferenceSettings.vue # 偏好設置頁面
<template><div><h3>偏好設置</h3><router-link to="/user/preferences/edit"><el-button>編輯偏好設置</el-button></router-link></div>
</template>
│ │ │ └── PreferenceEdit.vue # 偏好編輯頁面
<template><h1>偏好編輯頁面</h1>
</template>
│ │ └── security/
│ │ ├── SecuritySettings.vue # 安全設置頁面
<template><h1>安全設置頁面</h1>
</template>
│ │ └── SecurityModify.vue # 安全修改頁面
<template><h1>安全修改頁面</h1>
</template>
)
