前言

本文為博主的vue實戰(zhàn)小項目系列中的第三篇，很適合后端或者才入門的小伙伴看，一個前端項目從0到1的保姆級教學。前面的內容：

【vue實戰(zhàn)項目】通用管理系統(tǒng)：登錄頁-CSDN博客

【vue實戰(zhàn)項目】通用管理系統(tǒng)：封裝token操作和網絡請求-CSDN博客

【vue實戰(zhàn)項目】通用管理系統(tǒng)：api封裝、404頁-CSDN博客

本文將講解實現整個項目的重點：首頁的搭建，包含菜單、菜單的路由轉跳、面包屑導航等內容。

目錄

1.搭架子

2.布局

?編輯

3.Header

4.Footer

5.Menu

5.1.頁面

5.2.路由

5.2.1自定義菜單內容

5.2.2.開啟路由功能

6.面包屑導航

1.搭架子

先來看一下主頁的樣子：

主頁的結構：頭部+中間+底部，也就是由header、menu、footer三個組件組成。由于這三個組件是很多頁面都要用到的公共組件，所以在components下面建一個common用來放這些公共組件。然后分別建三個組件的架子，先建三個空白的架子吧，后面一點點往這三個組件里填內容。

先把這三個組件寫出來，先寫三個空白的架子即可，后面再慢慢填充：

header：

<template>
    <div>
        footer
    </div>
</template>

<script>
export default{
    data(){
        return {}
    }
}
</script>
<style lang="less" scoped>

</style>

footer：

<template>
    <div>
        footer
    </div>
</template>

<script>
export default{
    data(){
        return {}
    }
}
</script>
<style lang="less" scoped>

</style>

menu：

<template>
    <div>
        menu
    </div>
</template>

<script>
export default{
    data(){
        return {}
    }
}
</script>
<style lang="less" scoped>

</style>

在helloworld組件里面引入一下，看看能不能正常引入：

<template>
  <div class="helloworld">
    <Header></Header>
    <Menu/>
    <Footer/>
  </div>
</template>

<script>
import Footer from './common/Footer.vue'
import Header from './common/Header.vue'
import Menu from './common/Menu.vue'
export default {
  components:{
    Footer,
    Menu,
    Header
  },
  data(){
    return{}
  }
}
</script>

能正常引入的話，頁面上會顯示幾個組件的內容：

然后基于原來的HelloWorld改成Home頁面：

<template>
  <div class="home">
    <Header></Header>
    <Menu/>
    <Footer/>
  </div>
</template>

<script>
import Footer from './common/Footer.vue'
import Header from './common/Header.vue'
import Menu from './common/Menu.vue'
export default {
  components:{
    Footer,
    Menu,
    Header
  },
  data(){
    return{}
  }
}
</script>

<style lang="less">
.home{
  width: 100%;
  height: 100%;
}
</style>

2.布局

準備好三個組件后，接下來就是對Home進行布局，既然用了UI框架，直接用elementUI提供的布局即可，在其官網上有：

選一個，改一改，然后調整一下樣式：

<template>
  <div class="home">
    <Header/>
      <el-container class="content">
        <Menu/>
      <el-container>
        <el-main>Main</el-main>
        <el-footer><Footer/></el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Footer from './common/Footer.vue'
import Header from './common/Header.vue'
import Menu from './common/Menu.vue'
export default {
  components:{
    Footer,
    Menu,
    Header
  },
  data(){
    return{}
  }
}
</script>

<style lang="less">
.home{
  width: 100%;
  height: 100%;
  .content{
    position: absolute;
    width: 100%;
    top: 60px;
    bottom: 0;
  }
}
</style>

3.Header

接下來需要調整一下header，根據上面的效果圖可以看到，header上面要顯示系統(tǒng)的名字和登錄用戶的用戶名。系統(tǒng)名稱直接寫死，用戶名可以用到我們之前封裝的setToken.js去取登陸后我們放在緩存中的username作為用戶名來顯示。

<template>
    <div>
        <el-header>
            <div class="title">通用管理系統(tǒng)</div>
            <div>{{name}}</div>
        </el-header>
    </div>
</template>

<script>
import {getToken} from '@/utils/setToken.js' 
export default{
    data(){
        return {
            name:''
        }
    },
    created(){
        this.name=getToken('username')
    }
}
</script>
<style lang="less" scoped>

</style>

系統(tǒng)名稱要在最左邊，用戶名要在最右邊，所以調整一下樣式：

<template>
    <div class="header">
        <el-header>
            <div class="title">通用管理系統(tǒng)</div>
            <div>{{name}}</div>
        </el-header>
    </div>
</template>

<script>
import {getToken} from '@/utils/setToken.js' 
export default{
    data(){
        return {
            name:''
        }
    },
    created(){
        this.name=getToken('username')
    }
}
</script>
<style lang="less" scoped>
    .header{
        .el-header{
            background: #2578b5;
            color: #fff;
            line-height: 60px;
            display: flex;
            justify-content: space-between;
            .title{
                width:200px;
                font-size: 24px;
            }
        }
    }
</style>

這樣Header就處理好了。

4.Footer

footer比較簡單，用一個el-card來包裹，加上一些文字內容就可以了。

<template>
    <div class="footer">
        <el-card>Frontend 2023 BugMan</el-card>
    </div>
</template>

<script>
export default{
    data(){
        return {}
    }
}
</script>
<style lang="less" scoped>
    
</style>

5.Menu

5.1.頁面

菜單組件elementUI也提供了：

去找一個，然后調整一下即可：

<template>
  <div class="menu">
    <el-aside width="200px">
      <el-col :span="12">
        <h5>自定義顏色</h5>
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>導航一</span>
            </template>
            <el-menu-item-group>
              <template slot="title">分組一</template>
              <el-menu-item index="1-1">選項1</el-menu-item>
              <el-menu-item index="1-2">選項2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分組2">
              <el-menu-item index="1-3">選項3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
              <template slot="title">選項4</template>
              <el-menu-item index="1-4-1">選項1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="2">
            <i class="el-icon-menu"></i>
            <span slot="title">導航二</span>
          </el-menu-item>
          <el-menu-item index="3" disabled>
            <i class="el-icon-document"></i>
            <span slot="title">導航三</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-setting"></i>
            <span slot="title">導航四</span>
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-aside>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>
<style lang="less" scoped></style>

看一下效果圖，會發(fā)現菜單雖然是引進去了，但是樣式很奇怪，所以接下來要做的就是調整菜單樣式。

有左右和上下的滑動條說明高度和寬度不夠，將高度拉到100%，寬度調寬一點即可。背景色不和諧，需要手動調整一下背景色。具體的樣式調整后整個menu組件內容如下：

<template>
  <div class="menu">
    <el-aside width="200px">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#2578b5"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>導航一</span>
            </template>
            <el-menu-item-group>
              <template slot="title">分組一</template>
              <el-menu-item index="1-1">選項1</el-menu-item>
              <el-menu-item index="1-2">選項2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分組2">
              <el-menu-item index="1-3">選項3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
              <template slot="title">選項4</template>
              <el-menu-item index="1-4-1">選項1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="2">
            <i class="el-icon-menu"></i>
            <span slot="title">導航二</span>
          </el-menu-item>
          <el-menu-item index="3" disabled>
            <i class="el-icon-document"></i>
            <span slot="title">導航三</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-setting"></i>
            <span slot="title">導航四</span>
          </el-menu-item>
        </el-menu>
    </el-aside>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>
<style lang="less" scoped>
.menu{
    .el-aside{
        height: 100%;
        .el-menu{
            height:100%;
        }
        .el-submenu .el-menu-item{
            min-width: 0;
        }
    }
}
</style>

調整后的效果：

我們其實用不到那么多一級菜單，只保留一個導航一即可，并且其實我們也不需要elementUI自帶的示例里面給出的handleOpen和handleClose方法，所以這里再整理一下頁面，最終的內容和效果如下：

<template>
  <div class="menu">
    <el-aside width="200px">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          background-color="#2578b5"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>導航一</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-1">選項1</el-menu-item>
              <el-menu-item index="1-2">選項2</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
    </el-aside>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>
<style lang="less" scoped>
.menu{
    .el-aside{
        height: 100%;
        .el-menu{
            height:100%;
        }
        .el-submenu .el-menu-item{
            min-width: 0;
        }
    }
}
</style>

最終調整后的效果：

5.2.路由

5.2.1自定義菜單內容

菜單最核心的內容自然是點某一項轉跳到某一個組件上去。接下來我們要完成的就是菜單的路由轉跳。

首先改寫一下路由文件：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
    routes:[
        {
            path:'/',
            redirect:'/login',
            component: ()=>import('@/components/Login')
        },
        {
            path:'/login',
            name:'Login',
            component: ()=>import('@/components/Login')
        },
        {
            path:'/home',
            name:'學生管理',
            iconClass:'fa fa-users',
            //默認轉跳到學生管理頁
            redirect:'/home/student',
            component: ()=>import('@/components/Home'),
            children:[
                {
                    path:'/home/student',
                    name:'學生列表',
                    iconClass:'fa fa-list',
                    component: ()=>import('@/components/students/StudentList'),

                },
                {
                    path:'/home/info',
                    name:'信息列表',
                    iconClass:'fa fa-list-alt',
                    component: ()=>import('@/components/students/InfoList'),

                },
                {
                    path:'/home/info',
                    name:'信息管理',
                    iconClass:'fa fa-list-alt',
                    component: ()=>import('@/components/students/InfoLists'),

                },
                {
                    path:'/home/work',
                    name:'作業(yè)列表',
                    iconClass:'fa fa-list-ul',
                    component: ()=>import('@/components/students/WorkList'),

                },
                {
                    path:'/home/info',
                    name:'作業(yè)管理',
                    iconClass:'fa fa-list',
                    component: ()=>import('@/components/students/WorkMent'),

                }
            ]
        },
        {
            path:'/home/dataview',
            name:'數據分析',
            iconClass:'fa fa-bar-chart',
            component: ()=>import('@/components/Home'),
            children:[
                {
                    path:'/home/dataview',
                    name:'數據概覽',
                    iconClass:'fa fa-list',
                    component: ()=>import('@/components/dataAnalysis/DataView'),

                },
                {
                    path:'/home/mapview',
                    name:'地圖概覽',
                    iconClass:'fa fa-line-chart',
                    component: ()=>import('@/components/dataAnalysis/DataView'),

                },
                {
                    path:'/home/travel',
                    name:'旅游地圖',
                    iconClass:'fa fa-line-chart',
                    component: ()=>import('@/components/dataAnalysis/ScoreMap'),

                },
                {
                    path:'/home/score',
                    name:'分數地圖',
                    iconClass:'fa fa-line-chart',
                    component: ()=>import('@/components/dataAnalysis/TravelMap'),

                }
            ]
        },
        {
            path:'/users',
            name:'用戶中心',
            iconClass:'fa fa-user',
            component: ()=>import('@/components/Home'),
            children:[
                {
                    path:'/home/user',
                    name:'用戶概覽',
                    iconClass:'fa fa-list',
                    component: ()=>import('@/components/users/User'),

                }
            ]

        },
        {
            path:'*',
            name:'NotFound',
            component:()=>import('@/components/NotFound')
        }
    ],
    mode:'history'
})

在menu中打印一下看能不能取到配置好的index.js的內容：

<script>
export default {
  data() {
    return {
      menus:[]
    };
  },
  created(){
    console.log(this.$router.options.routes);
  }
};
</script>

可以看到是有數據的，有數據那就很好辦了：

去遍歷菜單把數據取出來，綁定到菜單欄上去即可：

<template>
  <div class="menu">
    <el-aside width="200px">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          background-color="#2578b5"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <template v-for="(item,index) in  menus">
            <el-submenu :index="index + ''" :key="index">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>{{item.name}}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-1">選項1</el-menu-item>
              <el-menu-item index="1-2">選項2</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          </template>
        </el-menu>
    </el-aside>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menus:[]
    };
  },
  created(){
    console.log(this.$router.options.routes);
    this.menus=[...this.$router.options.routes]
  }
};
</script>
<style lang="less" scoped>
.menu{
    .el-aside{
        height: 100%;
        .el-menu{
            height:100%;
        }
        .el-submenu .el-menu-item{
            min-width: 0;
        }
    }
}
</style>

可以看到已經取到我們配置的導航菜單了：

會發(fā)現還有一個問題，Login、用戶中心、404頁并不是我們想展示出來的，這里需要給菜單項加上一個是否隱藏的屬性，在遍歷時去判斷該屬性從而決定是不是要顯示：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
    routes:[
        {
            path:'/',
            redirect:'/login',
            hidden:true,
            component: ()=>import('@/components/Login')
        },
        {
            path:'/login',
            name:'Login',
            hidden:true,
            component: ()=>import('@/components/Login')
        },
        {
            path:'/home',
            name:'學生管理',
            iconClass:'fa fa-users',
            //默認轉跳到學生管理頁
            redirect:'/home/student',
            component: ()=>import('@/components/Home'),
            children:[
                {
                    path:'/home/student',
                    name:'學生列表',
                    iconClass:'fa fa-list',
                    component: ()=>import('@/components/students/StudentList'),

                },
                {
                    path:'/home/info',
                    name:'信息列表',
                    iconClass:'fa fa-list-alt',
                    component: ()=>import('@/components/students/InfoList'),

                },
                {
                    path:'/home/info',
                    name:'信息管理',
                    iconClass:'fa fa-list-alt',
                    component: ()=>import('@/components/students/InfoLists'),

                },
                {
                    path:'/home/work',
                    name:'作業(yè)列表',
                    iconClass:'fa fa-list-ul',
                    component: ()=>import('@/components/students/WorkList'),

                },
                {
                    path:'/home/info',
                    name:'作業(yè)管理',
                    iconClass:'fa fa-list',
                    component: ()=>import('@/components/students/WorkMent'),

                }
            ]
        },
        {
            path:'/home/dataview',
            name:'數據分析',
            iconClass:'fa fa-bar-chart',
            component: ()=>import('@/components/Home'),
            children:[
                {
                    path:'/home/dataview',
                    name:'數據概覽',
                    iconClass:'fa fa-list',
                    component: ()=>import('@/components/dataAnalysis/DataView'),

                },
                {
                    path:'/home/mapview',
                    name:'地圖概覽',
                    iconClass:'fa fa-line-chart',
                    component: ()=>import('@/components/dataAnalysis/DataView'),

                },
                {
                    path:'/home/travel',
                    name:'旅游地圖',
                    iconClass:'fa fa-line-chart',
                    component: ()=>import('@/components/dataAnalysis/ScoreMap'),

                },
                {
                    path:'/home/score',
                    name:'分數地圖',
                    iconClass:'fa fa-line-chart',
                    component: ()=>import('@/components/dataAnalysis/TravelMap'),

                }
            ]
        },
        {
            path:'/users',
            name:'用戶中心',
            iconClass:'fa fa-user',
            component: ()=>import('@/components/Home'),
            children:[
                {
                    path:'/home/user',
                    name:'用戶概覽',
                    iconClass:'fa fa-list',
                    component: ()=>import('@/components/users/User'),

                }
            ]

        },
        {
            path:'*',
            name:'NotFound',
            hidden:true,
            component:()=>import('@/components/NotFound')
        }
    ],
    mode:'history'
})

<template>
  <div class="menu">
    <el-aside width="200px">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          background-color="#2578b5"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <template v-for="(item,index) in  menus">
            <el-submenu :index="index + ''" :key="index" v-if="!item.hidden">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>{{item.name}}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-1">選項1</el-menu-item>
              <el-menu-item index="1-2">選項2</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          </template>
        </el-menu>
    </el-aside>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menus:[]
    };
  },
  created(){
    console.log(this.$router.options.routes);
    this.menus=[...this.$router.options.routes]
  }
};
</script>
<style lang="less" scoped>
.menu{
    .el-aside{
        height: 100%;
        .el-menu{
            height:100%;
        }
        .el-submenu .el-menu-item{
            min-width: 0;
        }
    }
}
</style>

效果：

把二級菜單一起調整出來：

<template>
  <div class="menu">
    <el-aside width="200px">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          background-color="#2578b5"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <template v-for="(item,index) in  menus">
            <el-submenu :index="index + ''" :key="index" v-if="!item.hidden">
            <template slot="title">
              <i :class="item.iconClass"></i>
              <span>{{item.name}}</span>
            </template>
            <el-menu-item-group v-for="(child,index) in item.children" :key="index">
              <el-menu-item :index="child.path">
                <i :class="child.iconClass">{{child.name}}</i>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          </template>
        </el-menu>
    </el-aside>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menus:[]
    };
  },
  created(){
    console.log(this.$router.options.routes);
    this.menus=[...this.$router.options.routes]
  }
};
</script>
<style lang="less" scoped>
.menu{
    .el-aside{
        height: 100%;
        .el-menu{
            height:100%;
            .fa{
              margin-right: 10px;
            }
        }
        .el-submenu .el-menu-item{
            min-width: 0;
        }
    }
}
</style>

5.2.2.開啟路由功能

先給meun組件上的elementUI的導航欄開啟路由功能，這樣點擊導航欄，路徑才會對應轉跳：

<el-menu
          router
          default-active="2"
          class="el-menu-vertical-demo"
          background-color="#2578b5"
          text-color="#fff"
          active-text-color="#ffd04b"
        >

然后在home上給出路由出口：

<template>
  <div class="home">
    <Header/>
      <el-container class="content">
        <Menu/>
      <el-container>
        <el-main><router-view></router-view></el-main>
        <el-footer><Footer/></el-footer>
      </el-container>
    </el-container>
  </div>
</template>

可以看到路由可以正常工作了：

6.面包屑導航

整個首頁的架子已經搭好了，也完成了菜單的轉跳，但是還差個細節(jié)就是面包屑導航欄：

去elementUI官網上找一個面包屑的導航組件：

在common下面新建一個面包屑組件，調整一下官網上扣下來的內容，使得其可以取到我們真實菜單的內容：

Home里面引入使用一下即可：文章來源地址http://www.zghlxwxcb.cn/news/detail-757171.html

<template>
  <div class="home">
    <Header/>
      <el-container class="content">
        <Menu/>
      <el-container>
        <el-main>
          <Breadcrumb/>
          <router-view></router-view>
        </el-main>
        <el-footer><Footer/></el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Footer from './common/Footer.vue'
import Header from './common/Header.vue'
import Menu from './common/Menu.vue'
import Breadcrumb from './common/Breadcrumb.vue'
export default {
  components:{
    Footer,
    Menu,
    Header,
    Breadcrumb
  },
  data(){
    return{}
  }
}
</script>

<style lang="less">
.home{
  width: 100%;
  height: 100%;
  .content{
    position: absolute;
    width: 100%;
    top: 60px;
    bottom: 0;
  }
}
</style>

到了這里，關于【vue實戰(zhàn)項目】通用管理系統(tǒng)：首頁的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！