要将`<footer>`部分封装为一个自定义组件并在你的代码中调用，可以按照以下步骤实现。
### 实现步骤：
1. **创建Footer组件**：将`<footer>`部分提取到一个单独的`.vue`文件中。
2. **在主应用中注册并使用组件**：在`App.vue`中引入并注册这个组件。
以下是完整的代码实现：
---
### Footer组件代码
```vue
<!-- FooterComponent.vue -->
<template>
<footer class="footer">
<p>© {{ year }} 旅行家. All rights reserved.</p>
</footer>
</template>
<script>
export default {
name: "FooterComponent",
data() {
return {
year: new Date().getFullYear(), // 动态获取当前年份
};
},
};
</script>
<style scoped>
.footer {
background-color: #f8f9fa;
padding: 20px 0;
text-align: center;
font-size: 14px;
color: #6c757d;
}
</style>
```
---
### 主应用代码（调用Footer组件）
```vue
<template>
<div id="app">
<!-- 导航栏 -->
<nav class="navbar">
<h1>旅行家</h1>
<ul>
<li><router-link to="/">首页</router-link></li>
<li><router-link to="/destinations">目的地</router-link></li>
<li><router-link to="/profile">个人设置</router-link></li>
</ul>
</nav>
<!-- 主内容区 -->
<main>
<router-view></router-view>
</main>
<!-- 调用Footer组件 -->
<FooterComponent />
</div>
</template>
<script>
import FooterComponent from './components/FooterComponent.vue'; // 引入Footer组件
export default {
name: 'App',
components: {
FooterComponent, // 注册Footer组件
},
};
</script>
```
---
### 解释：
1. **动态年份**：通过`new Date().getFullYear()`动态获取当前年份，避免手动修改代码。
2. **样式隔离**：使用`scoped`样式确保组件内的样式不会影响全局或其他组件。
3. **组件复用性**：将公共的`<footer>`部分封装为独立组件，便于在多个页面中复用。
4. **组件注册与使用**：在`App.vue`中通过`components`选项注册`FooterComponent`，并在模板中通过`<FooterComponent />`调用。
---
###