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

本文最后更新于:2024年4月25日 上午

路由

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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注册子路由

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<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可获取当前的路由路径

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<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>

🔵Vue博客[5](后台主页)
https://qingshaner.com/Vue博客[5](后台主页)/
作者
清山
发布于
2022年4月30日
许可协议