【微人事项目笔记】3、Home页的title以及左边导航菜单的制作
程序员文章站
2022-05-18 18:35:33
...
1、Home页的title和左边导航菜单
上一小节完成了成功登录之后跳转到home页,这篇笔记主要记录home的title和坐标导航菜单的制作,参考 https://element.eleme.cn/#/zh-CN/component/dropdown 下来菜单,技术要点v-for循环,this.$router.push(index)
的时候会先去Home组件看是否有<router-view></router-view>
,这是因为在router.js里面对要展示的组件路由放在了Home组件的children属性里。
Home.vue:
<template>
<div>
<el-container class="homeContainer">
<el-header class="homeHeader">
<div class="title">微人事</div>
<el-dropdown class="userInfo" @command="handleCommand">
<span class="el-dropdown-link">
{{user.name}}<i><img :src="user.userface" alt="用户头像"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="userinfo">个人中心</el-dropdown-item>
<el-dropdown-item command="setting">设置</el-dropdown-item>
<el-dropdown-item divided command="logout">注销登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-header>
<el-container>
<el-aside width="200px">
<el-menu @select="menuClick">
<!-- 循环加载router中的children-->
<el-submenu index="1" v-for="(item, index) in this.$router.options.routes" v-if="!item.hidden">
<template slot="title">
<i class="el-icon-location"></i>
<span>{{item.name}}</span>
</template>
<el-menu-item :index="child.path" v-for="(child, indexj) in item.children">{{child.name}}
</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
export default {
name: 'Home',
data() {
return {
user: JSON.parse(window.sessionStorage.getItem('user'))
}
},
methods: {
menuClick(index, indexPath) {
this.$router.push(index)
},
handleCommand(command) {
if (command == 'logout') {
this.$confirm('此操作将注销登录, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.getRequest('/logout')
window.sessionStorage.removeItem('user')
this.$router.replace('/')
}).catch(() => {
this.$message({
type: 'info',
message: '已取消操作'
});
});
}
}
}
}
</script>
<style>
.homeHeader {
background-color: #409eff;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0px 15px;
box-sizing: border-box;
}
.homeHeader .title {
font-size: 30px;
font-family: 华光行楷_CNKI;
color: #ffffff;
}
.homeHeader .userInfo {
cursor: pointer;
}
.el-dropdown-link img {
width: 48px;
height: 48px;
border-radius: 24px;
margin-left: 8px;
}
.el-dropdown-link {
display: flex;
align-items: center;
}
</style>
2、router.js,把要展示的组件放在了Home组件的children里
import Vue from 'vue'
import Router from 'vue-router'
import Login from './views/Login.vue'
import Home from './views/Home.vue'
import Test1 from "./views/Test1";
import Test2 from "./views/Test2";
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Login',
component: Login,
hidden: true
},
{
path: '/home',
name: 'Home',
component: Home,
hidden: true
},
{
path: '/home',
name: '导航一',
component: Home,
children: [
{
path: '/test1',
name: '选项1',
component: Test1
},
{
path: '/test2',
name: '选项2',
component: Test2
}
]
}
]
})
3、测试
登录之后跳转home页,点击菜单选项,展示相关组件,
上一篇: PLSQL显示中文乱码