🔵Vue博客[5](后台主页)

路由

src/router/index.ts注册/home组件

modules目录下新建main.ts设计主页子路由

export const main = [
  {
    path: '/home',
    component: () => import('@/views/home/index.vue'),
  },
  {
    path: '/creator',
    component: () => import('@/views/creator/index.vue'),
  },
  {
    path: '/article',
    component: () => import('@/views/article/index.vue'),
  },
  {
    path: '/about',
    component: () => import('@/views/about/index.vue'),
  }
]

index.ts注册子路由

import { createRouter, createWebHistory } from 'vue-router'
import { Login } from './modules/login'
import { main } from './modules/main'

const routes = [
  {
    path: '/',
    redirect: '/login'
  },
  {
    path: '/home',
    component: () => import('@/views/layout/index.vue'),
    children: main
  },
  ...Login
]

export const router = createRouter({
  history: createWebHistory(),
  routes
})

Layout

src/views目录新建layout目录,新建index.vue

<script lang="ts" setup>
import Header from './components/Header.vue'
import Aside from './components/Aside.vue'
import Footer from './components/Footer.vue'
import { router } from '@/router'
import { useUserStore } from '@/store'

/* 若未授权则返回登录页 */
if(!useUserStore().$state.id) router.push('/login')

</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <!-- Header组件 -->
        <Header />
      </el-header>
      <el-container>
        <el-aside>
          <!-- 导航栏组件 -->
          <Aside />
        </el-aside>
        <el-container>
          <el-main>
            <!-- 内容视图 -->
            <router-view />
          </el-main>
          <el-footer>
            <!-- Footer组件 -->
            <Footer />
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<style lang="scss" scoped>
.common-layout {
  position: fixed;
  width: 100%;
  top: 0;
  bottom: 0;
}

.el-container { width: 100%; height: 100%; }

.el-aside { width: 20%; }
.el-footer { background: var(--el-color-info-light-9);}
.el-header { background: var(--el-color-primary); }
.el-main { background: var(--el-color-info-light-9); }
</style>

layout目录新建components目录,

新建Header.vue,Aside.vue,Footer.vue三个组件

Header.vue

<script lang="ts" setup>
import { Histogram } from '@element-plus/icons-vue'
import { useUserStore } from '@/store'

const userStore = useUserStore()
const sayHi = (): string => {
  const now = new Date().getHours()
  if (now > 4 && now < 10) return '早上好'
  else if (now >= 10 && now < 13) return '中午好'
  else if (now >= 13 && now < 18) return '下午好'
  return '晚上好'
}
</script>

<template>
  <el-row>
    <el-col :span="6" :xs="10">
      <div class="grid-content header-title">
        <Histogram style="width: 1.5rem;height: 1.5rem;" />博客后台系统
      </div>
    </el-col>
    <el-col :lg="13" :sm="10" :xs="0">
      <div class="grid-content" />
    </el-col>
    <el-col :lg="5" :sm="8" :xs="14">
      <div class="grid-content avatar">
        <span>{{ userStore.$state.login }} {{ sayHi() }}</span>
        <!-- 头像 -->
        <el-avatar :size="50" :src="userStore.$state.avatar_url" />
      </div>
    </el-col>
  </el-row>
</template>

<style lang="scss" scoped>
.flex-box {
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.el-row { height: 100%; }

.grid-content { min-height: 36px; height: 100%; }

.header-title {
  color: #fff;
  font-weight: 900;
  font-size: 1.5rem;
  @extend .flex-box;
  justify-content: center;
}

.avatar {
  @extend .flex-box;

  span { color: #fff; font-size: 1.2rem; }
}

.el-avatar { border: 2px solid var(--el-color-primary-light-7); }
</style>

Aside.vue

:router="true"可开启自动路由导航

$route.path可获取当前的路由路径

<script lang="ts" setup>
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
</script>

<template>
  <el-col>
    <!-- 开启router,激活路径设为$route.path -->
    <el-menu :router="true" :default-active="$route.path" class="el-menu-vertical-demo">
      <el-menu-item index="/home">
        <el-icon>
          <location />
        </el-icon>
        <span>首页</span>
      </el-menu-item>
      <el-menu-item index="/creator">
        <el-icon>
          <icon-menu />
        </el-icon>
        <span>创作</span>
      </el-menu-item>
      <el-menu-item index="/article">
        <el-icon>
          <document />
        </el-icon>
        <span>文章</span>
      </el-menu-item>
      <el-menu-item index="/about">
        <el-icon>
          <setting />
        </el-icon>
        <span>关于</span>
      </el-menu-item>
    </el-menu>
  </el-col>
</template>

<style lang="scss" scoped>
.el-col {
  width: 100%;
}

.el-menu {
  width: 100%;
  border: 0;
}

.el-menu-item {
  display: flex;
  justify-content: center;
}
</style>