admin管理员组文章数量:1633840
昨天我们创建了一个vue项目
开始肯定是路由,我之前公司都是做后台管理系统的 我当时一直在想 他们的布局组件封装在src下的layout文件夹里 那么他的路由出口应该在app.vue里 他是怎么整过去的 今天他来了
首先 我们也在src下创建一个layout文件夹 打开我们的element的布局 找到自己想要的布局 引入进来 记得npm下载elementUI然后在main.js里引入哦 回归正题 我引入的
<template>
<div id="main">
<el-container>
<el-aside width="200px">
<iAside></iAside>
</el-aside>
<el-container>
<!-- 头部区域 -->
<el-header>
<Header></Header>
</el-header>
<!-- main区域 -->
<el-main>
<router-view />
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
import Header from "@/layout/header/iHeader.vue"
import iAside from "@/layout/aside/iAside.vue"
export default {
components: { Header, iAside },
methods: { }
}
</script>
<style scoped>
#main {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.el-header,
.el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
}
body>.el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
::v-deep .el-container {
height: 100%;
}
</style>
侧边栏跟头部组件里 暂时没有写东西 我们今天是把怎么显示layout布局为主 layout.vue文件里写好了之后 回到路由 三部曲
第一部 引入layout组件
第二部 指定layout组件
第三部 重定向
之后我们进入页面user
是不是很简单
版权声明:本文标题:vue2.x项目从0到1(一)之路由(后台管理layout布局) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1729177284a1188878.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论