image.png
image.png

6-1 个人中心页

image.png
src/views/profile/index.vue

  1. <template>
  2.   <div class="profile-container">
  3.     <el-card>
  4.       <template #header>
  5.         <div class="card-header">
  6.           <span>关于我</span>
  7.         </div>
  8.       </template>
  9.       <div class="profile" v-if="userInfo">
  10.         <div class="avatar">
  11.           <img :src="avatar" alt="" />
  12.         </div>
  13.         <h2>用户名：{{ userInfo.username }}</h2>
  14.         <h3>用户角色：{{ roleNames }}</h3>
  15.         <div v-if="userInfo.description">
  16.           <span>个人说明</span>
  17.           <p>{{ userInfo.description }}</p>
  18.         </div>
  19.       </div>
  20.     </el-card>
  21.   </div>
  22. </template>
  24. <script lang="ts">
  25. import { computed, defineComponent } from 'vue'
  26. import { useStore } from '@/store'
  27. import defaultAvatar from '@/assets/logo.png'
  29. export default defineComponent({
  30.   name: 'Profile',
  31.   setup() {
  32.     const store = useStore()
  33.     const userInfo = computed(() => store.state.user.userInfo)
  34.     const roleNames = computed(() => store.getters.roleNames)
  36.     const avatar = computed(() => userInfo?.value?.avatar || defaultAvatar)
  37.     return {
  38.       userInfo,
  39.       avatar,
  40.       roleNames
  41.     }
  42.   }
  43. })
  44. </script>
  46. <style lang="scss" scoped>
  47.   .profile-container {
  48.     width: 500px;
  49.     margin: 10px auto;
  50.     .profile {
  51.       text-align: center;
  52.       .avatar {
  53.         width: 100px;
  54.         height: 100px;
  55.         border-radius: 50%;
  56.         margin: 10px auto;
  57.         img {
  58.           width: 100%;
  59.           height: 100%;
  60.         }
  61.       }
  62.     }
  63.   }
  64. </style>

路由注册

src/router/index.ts

  1. import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
  2. import Layout from '@/layout/index.vue'
  4. // 看作是异步获取路由
  5. export const asyncRoutes: Array<RouteRecordRaw> = [
  6.   {
  7.     path: '/documentation',
  8.     component: Layout, // 布局组件作为一级路由
  9.     redirect: '/documentation/index',
  10.     name: 'DocumentationLayout',
  11.     children: [
  12.       {
  13.         path: 'index',
  14.         name: 'Documentation',
  15.         component: () => import(/* webpackChunkName: "documentation" */ '@/views/documentation/index.vue'),
  16.         meta: {
  17.           title: 'Documentation',
  18.           icon: 'documentation',
  19.           hidden: false, // 菜单栏不显示
  20.           // 路由是否缓存 没有这个属性或false都会缓存 true不缓存
  21.           noCache: true
  22.         }
  23.       }
  24.     ]
  25.   },
  26.   {
  27.     path: '/async',
  28.     component: Layout,
  29.     redirect: '/async/index',
  30.     name: 'AsyncLayout',
  31.     children: [
  32.       {
  33.         path: 'index',
  34.         name: 'Async',
  35.         component: () => import(/* webpackChunkName: "async" */ '@/views/async.vue'),
  36.         meta: {
  37.           title: '动态路由',
  38.           icon: 'guide'
  39.           // 当guide路由激活时高亮选中的是 documentation/index菜单
  40.           // activeMenu: '/documentation/index'
  41.         }
  42.       }
  43.     ]
  44.   },
  45.   {
  46.     path: '/guide',
  47.     component: Layout,
  48.     redirect: '/guide/index',
  49.     name: 'GuideLayout',
  50.     meta: {
  51.       title: 'GuideLay',
  52.       icon: 'guide'
  53.     },
  54.     children: [
  55.       {
  56.         path: 'index',
  57.         name: 'Guide',
  58.         component: () => import(/* webpackChunkName: "guide" */ '@/views/guide/index.vue'),
  59.         meta: {
  60.           title: 'Guide',
  61.           icon: 'guide'
  62.           // 当guide路由激活时高亮选中的是 documentation/index菜单
  63.           // activeMenu: '/documentation/index'
  64.         }
  65.       },
  66.       {
  67.         path: 'guide2',
  68.         name: 'Guide2',
  69.         component: () => import(/* webpackChunkName: "guide" */ '@/views/guide/index.vue'),
  70.         meta: {
  71.           title: 'Guide2',
  72.           icon: 'guide'
  73.           // 当guide路由激活时高亮选中的是 documentation/index菜单
  74.           // activeMenu: '/documentation/index'
  75.         }
  76.       },
  77.       {
  78.         path: 'guide3',
  79.         name: 'Guide3',
  80.         component: () => import(/* webpackChunkName: "guide" */ '@/views/guide/index.vue'),
  81.         meta: {
  82.           title: 'Guide3',
  83.           icon: 'guide'
  84.           // 当guide路由激活时高亮选中的是 documentation/index菜单
  85.           // activeMenu: '/documentation/index'
  86.         }
  87.       }
  88.     ]
  89.   },
  90.   {
  91.     path: '/system',
  92.     component: Layout,
  93.     redirect: '/system/user',
  94.     name: 'SystemLayout',
  95.     meta: {
  96.       title: 'System',
  97.       icon: 'lock',
  98.       alwaysShow: true // 根路由始终显示 哪怕只有一个子路由
  99.     },
  100.     children: [
  101.       {
  102.         path: 'menu',
  103.         name: 'Menu Management',
  104.         component: () => import(/* webpackChunkName: "menu" */ '@/views/system/menu/index.vue'),
  105.         meta: {
  106.           title: 'Menu Management',
  107.           hidden: false,
  108.           breadcrumb: false
  109.         }
  110.       },
  111.       {
  112.         path: 'role',
  113.         name: 'Role Management',
  114.         component: () => import(/* webpackChunkName: "role" */ '@/views/system/role/index.vue'),
  115.         meta: {
  116.           title: 'Role Management',
  117.           hidden: false
  118.         }
  119.       },
  120.       {
  121.         path: 'user',
  122.         name: 'User Management',
  123.         component: () => import(/* webpackChunkName: "user" */ '@/views/system/user/index.vue'),
  124.         meta: {
  125.           title: 'User Management'
  126.         }
  127.       }
  128.     ]
  129.   },
  130.   { // 外链路由
  131.     path: '/external-link',
  132.     component: Layout,
  133.     children: [
  134.       {
  135.         path: 'https://www.baidu.com/',
  136.         redirect: '/',
  137.         meta: {
  138.           title: 'External Link',
  139.           icon: 'link'
  140.         }
  141.       }
  142.     ]
  143.   },
  144.   { // 404一定放在要在最后面
  145.     path: '/:pathMatch(.*)*',
  146.     redirect: '/404',
  147.     meta: {
  148.       hidden: true
  149.     }
  150.   }
  151. ]
  153. export const constantRoutes: Array<RouteRecordRaw> = [
  154.   {
  155.     path: '/',
  156.     component: Layout,
  157.     redirect: '/dashboard',
  158.     name: 'DashboardLayout',
  159.     children: [
  160.       {
  161.         path: 'dashboard',
  162.         name: 'Dashboard',
  163.         component: () => import(/* webpackChunkName: "dashboard" */ '@/views/dashboard/index.vue'),
  164.         meta: {
  165.           title: 'Dashboard',
  166.           // icon: 'dashboard'
  167.           icon: 'el-icon-platform-eleme',
  168.           affix: true // 固定显示在tagsView中
  169.         }
  170.       }
  171.     ]
  172.   },
  173.   {
  174.     path: '/redirect',
  175.     component: Layout,
  176.     meta: {
  177.       hidden: true
  178.     },
  179.     name: 'Redirect',
  180.     children: [
  181.       { // 带参数的动态路由正则匹配
  182.         // https://next.router.vuejs.org/zh/guide/essentials/route-matching-syntax.html#%E5%8F%AF%E9%87%8D%E5%A4%8D%E7%9A%84%E5%8F%82%E6%95%B0
  183.         path: '/redirect/:path(.*)', // 要匹配多级路由 应该加*号
  184.         component: () => import('@/views/redirect/index.vue')
  185.       }
  186.     ]
  187.   },
  188.   {
  189.     path: '/login',
  190.     name: 'Login',
  191.     component: () => import('@/views/login/index.vue')
  192.   },
  193.   {
  194.     path: '/profile',
  195.     component: Layout,
  196.     redirect: '/profile/index',
  197.     name: 'ProfileLayout',
  198.     children: [
  199.       {
  200.         path: 'index',
  201.         name: 'Profile',
  202.         component: () => import('@/views/profile/index.vue'),
  203.         meta: {
  204.           hidden: true,
  205.           title: '个人中心'
  206.         }
  207.       }
  208.     ]
  209.   },
  210.   {
  211.     path: '/401',
  212.     component: Layout,
  213.     name: '401Layout',
  214.     children: [
  215.       {
  216.         path: '',
  217.         component: () => import('@/views/error-page/401.vue'),
  218.         meta: {
  219.           title: '401',
  220.           icon: '404',
  221.           hidden: true
  222.         }
  223.       }
  224.     ]
  225.   },
  226.   {
  227.     path: '/404',
  228.     component: () => import('@/views/error-page/404.vue'),
  229.     meta: {
  230.       hidden: true // 404 hidden掉
  231.     }
  232.   }
  233. ]
  235. export const routes = [
  236.   ...constantRoutes
  237.   // ...asyncRoutes
  238. ]
  240. const router = createRouter({
  241.   history: createWebHashHistory(),
  242.   routes
  243. })
  245. export default router

6-2 修改头像下拉选项

src/layout/components/avatar/index.vue

  1. <template>
  2.    <el-dropdown
  3.     class="avatar-container">
  4.     <div class="avatar-wrapper">
  5.       <img :src="avatar" class="user-avatar">
  6.       <i class="el-icon-caret-bottom" />
  7.     </div>
  8.     <template #dropdown>
  9.       <el-dropdown-menu>
  10.         <el-dropdown-item v-if="username">
  11.           <span style="display: block" :style="{fontWeight: '500'}">用户名：{{username}}</span>
  12.         </el-dropdown-item>
  13.         <router-link to="/">
  14.           <el-dropdown-item>首页</el-dropdown-item>
  15.         </router-link>
  16.         <router-link to="/profile/index">
  17.           <el-dropdown-item>个人中心</el-dropdown-item>
  18.         </router-link>
  19.         <el-dropdown-item divided @click="logout">
  20.           <span style="display: block">退出登录</span>
  21.         </el-dropdown-item>
  22.       </el-dropdown-menu>
  23.     </template>
  24.   </el-dropdown>
  25. </template>
  27. <script lang="ts">
  28. import defaultAvatar from '@/assets/logo.png'
  29. import { defineComponent, getCurrentInstance, computed } from 'vue'
  30. import { useStore } from '@/store'
  32. export default defineComponent({
  33.   setup() {
  34.     const store = useStore()
  35.     const { proxy } = getCurrentInstance()!
  36.     const logout = () => {
  37.       store.dispatch('user/logout').then(() => {
  38.         proxy?.$message.success('退出登录')
  39.         window.location.reload()
  40.       })
  41.     }
  43.     const userInfo = computed(() => store.state.user.userInfo)
  44.     const avatar = computed(() => userInfo.value?.avatar || defaultAvatar)
  45.     const username = computed(() => userInfo.value?.username || '')
  47.     // onMounted(() => {
  48.     //   // 获取用户信息
  49.     //   store.dispatch('user/getUserInfo')
  50.     // })
  52.     return {
  53.       logout,
  54.       avatar,
  55.       username
  56.     }
  57.   }
  58. })
  59. </script>
  61. <style lang="scss" scoped>
  62. .avatar-container {
  63.   margin-right: 30px;
  64.   .avatar-wrapper {
  65.     margin-top: 5px;
  66.     .user-avatar {
  67.       width: 40px;
  68.       height: 40px;
  69.       border-radius: 10px;
  70.       cursor: pointer;
  71.     }
  73.     .el-icon-caret-bottom {
  74.       cursor: pointer;
  75.       font-size: 12px;
  76.     }
  77.   }
  78. }
  79. </style>