aizuda-web-vue3/src/views/profile/index.vue

<template>
	<el-container class="page-user">
		<el-aside style="width: 240px">
			<el-container>
				<el-header style="height: auto; display: block">
					<div class="user-info-top">
						<el-avatar :size="70" src="img/avatar.jpg"></el-avatar>
						<h2>{{ user.userName }}</h2>
						<p>
							<el-tag effect="dark" round size="large" disable-transitions>{{ user.role }}</el-tag>
						</p>
					</div>
				</el-header>
				<el-main class="nopadding">
					<el-menu class="menu" :default-active="page">
						<el-menu-item-group v-for="group in menu" :key="group.groupName" :title="group.groupName">
							<el-menu-item v-for="item in group.list" :key="item.component" :index="item.component" @click="openPage">
								<el-icon v-if="item.icon"><component :is="item.icon" /></el-icon>
								<template #title>
									<span>{{ item.title }}</span>
								</template>
							</el-menu-item>
						</el-menu-item-group>
					</el-menu>
				</el-main>
			</el-container>
		</el-aside>
		<el-main>
			<Suspense>
				<template #default>
					<component :is="page" />
				</template>
				<template #fallback>
					<el-skeleton :rows="3" />
				</template>
			</Suspense>
		</el-main>
	</el-container>
</template>

<script lang="ts" name="profileIndex">
import { defineAsyncComponent } from 'vue'
// setup
export default {
	name: 'ProfileIndex',
	components: {
		account: defineAsyncComponent(() => import('./user/account')),
		setting: defineAsyncComponent(() => import('./user/setting')),
		pushSettings: defineAsyncComponent(() => import('./user/pushSettings')),
		password: defineAsyncComponent(() => import('./user/password')),
		space: defineAsyncComponent(() => import('./user/space')),
		logs: defineAsyncComponent(() => import('./user/logs')),
		upToEnterprise: defineAsyncComponent(() => import('./user/upToEnterprise'))
	},
	//路由跳转进来 判断from是否有特殊标识做特殊处理
	beforeRouteEnter(to, from, next) {
		next(vm => {
			if (from.is) {
				//删除特殊标识，防止标签刷新重复执行
				delete from.is
				//执行特殊方法
				vm.$alert('路由跳转过来后含有特殊标识，做特殊处理', '提示', {
					type: 'success',
					center: true
				})
					.then(() => {})
					.catch(() => {})
			}
		})
	},
	data() {
		return {
			menu: [
				{
					groupName: '基本设置',
					list: [
						{
							icon: 'el-icon-postcard',
							title: '账号信息',
							component: 'account'
						},
						{
							icon: 'el-icon-operation',
							title: '个人设置',
							component: 'setting'
						},
						{
							icon: 'el-icon-lock',
							title: '密码',
							component: 'password'
						},
						{
							icon: 'el-icon-bell',
							title: '通知设置',
							component: 'pushSettings'
						}
					]
				},
				{
					groupName: '数据管理',
					list: [
						{
							icon: 'el-icon-coin',
							title: '存储空间信息',
							component: 'space'
						},
						{
							icon: 'el-icon-clock',
							title: '操作日志',
							component: 'logs'
						}
					]
				},
				{
					groupName: '账号升级',
					list: [
						{
							icon: 'el-icon-office-building',
							title: '升级为企业账号',
							component: 'upToEnterprise'
						}
					]
				}
			],
			user: {
				userName: 'Sakuya',
				role: '超级管理员'
			},
			page: 'account'
		}
	},
	methods: {
		openPage(item) {
			this.page = item.index
		}
	}
}
</script>