如何在vuejs中设置值选择加载页面

<template>
  <div>
    <button @click="loadHomePage">加载主页</button>
    <button @click="loadAboutPage">加载关于页</button>
    <button @click="loadContactPage">加载联系页</button>

    <div v-if="selectedPage === 'home'">
      <!-- 主页内容 -->
      <h1>这是主页</h1>
    </div>

    <div v-else-if="selectedPage === 'about'">
      <!-- 关于页内容 -->
      <h1>这是关于页</h1>
    </div>

    <div v-else-if="selectedPage === 'contact'">
      <!-- 联系页内容 -->
      <h1>这是联系页</h1>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedPage: 'home' // 默认加载主页
    };
  },
  methods: {
    loadHomePage() {
      this.selectedPage = 'home';
    },
    loadAboutPage() {
      this.selectedPage = 'about';
    },
    loadContactPage() {
      this.selectedPage = 'contact';
    }
  }
};
</script>