vue3配置导航栏和页脚（附代码）

一：前言

本文主要是针对刚上手 Vue3 的初学者所写。涉及内容比较简单，没有太过于复杂的逻辑。因此有想学神入知识的可以看一下别的文章。

本次实验的技术是 Vue3 + TypeScript + Element Plus 。因为这三个是在 Vue 开发中经常一起出现的。如果没有学过的话也不要紧，逻辑大体是一样的，不妨碍阅读。

这里附上 Gitee 开源地址，有想要实践一下又懒得写代码的小伙伴可以直接下载运行。同时在本系列 Vue3 学习中，后续代码也都会更新在这个 Gitee 库中。

二：开发

涉及的 Element Plus 组件：

布局容器：el-container
单选：el-radio-group
菜单：el-sub-menu
面包屑：el-breadcrumb

项目目录如下：

各文件代码

1、views 下的 index.vue

该页面是用户的首页，其使用了布局容器，菜单等组件，以及自己封装的注入底部标签等。后续我们进行开发的时候，都是在<el-main>标签中开发，可以使用一个<keep-alive>进行缓存路由等。

<template>
  <div class="common-layout">
    <!-- 设置布局格式，做菜单，右边上中下是，头，内容，脚 -->
    <el-container>
      <el-aside width="200px"><navbar></navbar></el-aside>
      <el-container class="container">
        <el-header><breadcrumb></breadcrumb></el-header>
        <el-main>这里是主页的内容</el-main>
        <el-footer><footers></footers></el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ElButton, ElInput } from 'element-plus'
import { ref } from 'vue'
import navbar from '@/components/navbar.vue'
import breadcrumb from '@/components/breadcrumb.vue'
import footers from '@/components/footers.vue'

</script>


<style>
.common-layout{
  margin-top: 15px;
}
.container{
  padding:5px 0 0 15px;
}
.input {
  display: inline;
  margin: 20px 30px;
}

.button {
  width: 90px;
}
</style>

2、navbar组件

这个组件是我们右侧的菜单组件，目前的话是使用的纯静态来写的，后续会进行完善，届时通过配置路由的方式来同步菜单。

<template>
    <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
      <el-radio-button :label="false">expand</el-radio-button>
      <el-radio-button :label="true">collapse</el-radio-button>
    </el-radio-group>
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      @open="handleOpen"
      @close="handleClose"
    >
      <el-sub-menu index="1">
        <template #title>
          <el-icon><location /></el-icon>
          <span>Vue3 练习</span>
        </template>
        <el-menu-item-group>
          <template #title><span>主要知识点</span></template>
          <el-menu-item index="1-1">store</el-menu-item>
          <el-menu-item index="1-2">Router</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="次级知识点">
          <el-menu-item index="1-3">Elements Plus</el-menu-item>
        </el-menu-item-group>
        <el-sub-menu index="1-4">
          <template #title><span>打包</span></template>
          <el-menu-item index="1-4-1">Vite知识</el-menu-item>
        </el-sub-menu>
      </el-sub-menu>
      <el-menu-item index="2">
        <el-icon><icon-menu /></el-icon>
        <template #title>TypeScript</template>
      </el-menu-item>
      <el-menu-item index="3" disabled>
        <el-icon><document /></el-icon>
        <template #title>Vite</template>
      </el-menu-item>
      <el-menu-item index="4">
        <el-icon><setting /></el-icon>
        <template #title>Pina</template>
      </el-menu-item>
    </el-menu>
  </template>
  
  <script lang="ts" setup>
  import { ref } from 'vue'
  import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
  } from '@element-plus/icons-vue'
  
  const isCollapse = ref(true)
  const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
  }
  const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
  }
  </script>
  
  <style>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  </style>

3、breadcrumb组件

该组件同样是使用的 Element Plus 自带的面包屑组件，一样是静态的，后面应当根据路由守卫，进行跳转配置标签。

<template>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item
        ><a href="/">promotion management</a></el-breadcrumb-item
      >
      <!-- <el-breadcrumb-item>promotion list</el-breadcrumb-item>
      <el-breadcrumb-item>promotion detail</el-breadcrumb-item> -->
    </el-breadcrumb>
  </template>

4、footers

页脚组件是我们自己封装的，可以根据自己的喜欢来设置布局，只是一些简单的CSS样式。由于我们这里还没有写太多的内容，因此没有吧这个放在最下面，不然会有些不美观。有需要的小伙伴可以将CSS中注释掉的两行代码解开。

<template>
    <div class="app-foot">
        {{ footerMsgCopyright }}
        <span class="source">{{ footerMsgName }}</span>
    </div>
</template>
<script setup>
    // 版权说明的文字
    const footerMsgCopyright = 'Copyright © 2020-2021 xxxx平台 - Powered By ';
    // 单位
    const footerMsgName = 'xxxx实验室'
</script>

<style scoped>
.app-foot {
    /* footer 固定在页面底部 */
    min-height: 35px;
    background-color: #eeeeee;
    width: 100%;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* position: fixed; */
    /* bottom: 0px; */
}

.source {
    font-weight: 600;
}
</style>

5、router下的index.ts

这个是路由配置页面，没有了解过路由配置的小伙伴可以参考我之前的文章。

Vue3路由配置-CSDN博客

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    name: 'index',
    component: () => import('../views/index.vue')
  }
]

const router = createRouter({
  // history: createWebHistory(process.env.BASE_URL),
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

export default router