当前位置：首页 > VUE

用vue实现底部

2026-02-19 13:37:01VUE

以下是用 Vue 实现底部布局的几种常见方法，可根据具体需求选择：

固定底部布局

使用 CSS 固定定位将底部固定在页面最下方，适合需要始终显示的页脚：

<template>
  <div class="page-container">
    <main>页面主要内容区域</main>
    <footer class="footer">底部固定内容 ©2023</footer>
  </div>
</template>

<style scoped>
.page-container {
  position: relative;
  min-height: 100vh;
}
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 1rem;
  background: #f5f5f5;
}
</style>

弹性盒模型布局

通过 Flexbox 实现内容区域自动扩展，底部自然下压的布局：

<template>
  <div class="flex-container">
    <header>头部内容</header>
    <main class="flex-grow">可扩展内容区</main>
    <footer>底部内容</footer>
  </div>
</template>

<style scoped>
.flex-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.flex-grow {
  flex: 1;
}
</style>

动态高度底部

当内容不足视窗高度时底部贴底，内容超过时底部跟随内容下移：

<template>
  <div class="wrapper">
    <div class="content"><!-- 动态内容 --></div>
    <footer class="footer">自适应底部</footer>
  </div>
</template>

<style scoped>
.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.content {
  flex: 1;
}
</style>

带路由的底部组件

在 Vue Router 应用中创建全局底部组件：

用vue实现底部

创建 Footer.vue 组件文件

在 App.vue 中引入：


<template>
<div id="app">
 <router-view/>
 <Footer v-if="$route.meta.showFooter"/>
</div>
</template>

import Footer from './components/Footer.vue' export default { components: { Footer } } ``` 3. 在路由配置中通过 meta 控制显示： ```javascript { path: '/', component: Home, meta: { showFooter: true } } ```