* 在pages目錄下創建layout.vue組件 * 在router.js文件內配置layout組件的路由 ~~~ ?import Vue from "vue" ?import Router from "vue-router" ?? ?Vue.use(Router) ?? ?export default new Router({ ? routes : [ ? { ? path : "/login", ? name : "login", ? component : ()=> import("./pages/login.vue") ? }, ? { ? path : "/", ? name : "layout", ? component : ()=> import("./pages/layout.vue") ? } ? ] ?}) ~~~ * 使用iview的布局組件實現主頁布局 ~~~ ?<template> ? <Layout class="layout"> ? <Header class="bg-white px-0">導航欄</Header> ? <Layout> ? <Sider hide-trigger class="bg-light">側邊欄</Sider> ? <Content class="bg-white">主內容</Content> ? </Layout> ? <Footer class="bg-white d-flex p-0 "> ? <div class="bg-light footer-left"> ? 空間容量信息 ? </div> ? <div>分頁</div> ? </Footer> ? </Layout> ?</template> ?? ?<script> ?</script> ?? ?<style scoped="scoped"> ? .layout { ? height: 100%; ? } ? .footer-left{ ? width: 200px; ? } ?</style> ?? ~~~