Vue.js/Nuxt2中如何通过按钮点击切换首页内容组件？

实现思路 #

利用Vue的动态组件特性，通过绑定当前要显示的组件标识，配合按钮点击事件切换这个标识值，就能快速实现组件内容的替换显示。

具体步骤及代码示例 #

假设你还需要切换到OtherPage.vue组件，按以下方式修改index.vue：

1. 模板部分

把固定的<MainPage/>替换为动态组件，并添加切换按钮：

<template>
  <div>
    <!-- 导航切换按钮 -->
    <button @click="switchComponent('MainPage')">首页</button>
    <button @click="switchComponent('OtherPage')">其他页面</button>
    
    <!-- 动态渲染目标组件 -->
    <component :is="currentComponent"></component>
  </div>
</template>

2. 脚本部分

引入需要切换的组件，定义当前组件状态和切换方法：

<script>
// 引入组件
import MainPage from './components/MainPage.vue'
import OtherPage from './components/OtherPage.vue'

export default {
  components: {
    MainPage,
    OtherPage
  },
  data() {
    return {
      // 默认显示首页组件
      currentComponent: 'MainPage'
    }
  },
  methods: {
    switchComponent(componentName) {
      this.currentComponent = componentName
    }
  }
}
</script>

Vue3 组合式API写法（可选） #

如果用Vue3的<script setup>，代码会更简洁：

<template>
  <div>
    <button @click="currentComponent = 'MainPage'">首页</button>
    <button @click="currentComponent = 'OtherPage'">其他页面</button>
    <component :is="currentComponent"></component>
  </div>
</template>

<script setup>
import MainPage from './components/MainPage.vue'
import OtherPage from './components/OtherPage.vue'
import { ref } from 'vue'

const currentComponent = ref('MainPage')
</script>

注意事项 #

• 所有要切换的组件必须正确引入并注册
• 若需新增切换组件，只需重复引入、添加对应按钮即可
• 动态组件的:is属性也可直接绑定组件对象（而非字符串），比如把currentComponent设为MainPage组件本身同样有效

内容的提问来源于stack exchange，提问作者Bernie Sanders