添加页脚

简介

在本章中，我们将实现登录、注册和主页的基本用户界面。我们将从在页面底部添加一个简单的页脚开始，然后逐步完成各个页面的开发。

让我们开始吧！

更新 Footer.vue 文件

为了在页面底部添加一个简单的页脚，我们需要在 ./components 文件夹中创建一个名为 Footer.vue 的文件。

可以使用以下代码片段中的内容来创建一个简单的页脚模板：

1<template>
2  <footer>
3    <div class="container">
4      <router-link to="/" class="logo-font">Medium 克隆</router-link>
5      <span class="attribution">
6        一个来自 <a href="https://kriss.io">Kriss</a> 的真实世界 Vue 项目。
7      </span>
8    </div>
9  </footer>
10</template>

接下来，我们稍微调整一下 Footer 的样式。

1footer {
2  background: #373a3c;
3  margin-top: 3rem;
4  padding: 1rem 0;
5  position: absolute;
6  bottom: 0;
7  width: 100%;
8}
9footer .logo-font {
10  vertical-align: middle;
11}
12footer .attribution {
13  vertical-align: middle;
14  margin-left: 10px;
15  font-size: 0.9rem;
16  color: #FFF;
17  font-weight: 300;
18}

导入并注册 Footer 组件

我们可以在 App.vue 文件中导入 Footer 组件，以便在每一页的末尾显示页脚，如下代码所示。

1import Footer from "./components/Footer.vue";

然后需要将其注册到 components 对象中，并在 router-view 元素下方使用，如以下代码片段所示。

1<template>
2  <div>  
3    <NavBar />
4    <router-view />
5    <Footer />
6  </div>
7</template>
8
9<script>
10import NavBar from "./components/NavBar.vue";
11import Footer from "./components/Footer.vue";
12
13export default {
14  components: {
15    NavBar,
16    Footer
17  }
18}
19</script>

运行应用程序

点击 运行 按钮，观察输出结果。

如我们所见，页面底部已经成功显示了页脚。