当前位置：首页 > VUE

vue实现点击页面切换

2026-02-25 19:54:52VUE

Vue 实现点击页面切换

在 Vue 中实现点击页面切换可以通过以下几种方式完成，具体取决于项目需求和路由管理方式。

使用 Vue Router 实现页面切换

Vue Router 是 Vue.js 官方的路由管理器，适用于单页应用（SPA）的页面切换。

安装 Vue Router：

npm install vue-router

配置路由文件（例如 router/index.js）：

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

在 main.js 中引入并使用路由：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

在组件中使用 <router-link> 实现点击切换：

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

使用动态组件切换

如果不需要路由管理，可以通过动态组件实现页面切换。

定义组件：

import { defineComponent } from 'vue';

const Home = defineComponent({
  template: '<div>Home Page</div>'
});

const About = defineComponent({
  template: '<div>About Page</div>'
});

在父组件中切换：

<template>
  <div>
    <button @click="currentComponent = 'Home'">Home</button>
    <button @click="currentComponent = 'About'">About</button>
    <component :is="currentComponent"></component>
  </div>
</template>

<script>
import { ref } from 'vue';
import Home from './Home.vue';
import About from './About.vue';

export default {
  components: { Home, About },
  setup() {
    const currentComponent = ref('Home');
    return { currentComponent };
  }
};
</script>

使用条件渲染切换

对于简单的页面切换，可以使用 v-if 或 v-show 实现。

<template>
  <div>
    <button @click="showHome = true">Home</button>
    <button @click="showHome = false">About</button>
    <div v-if="showHome">Home Page</div>
    <div v-else>About Page</div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const showHome = ref(true);
    return { showHome };
  }
};
</script>

使用事件总线或状态管理

对于复杂应用，可以通过事件总线（Event Bus）或状态管理（如 Pinia、Vuex）实现页面切换。

使用 Pinia 示例：

// stores/pageStore.js
import { defineStore } from 'pinia';

export const usePageStore = defineStore('page', {
  state: () => ({
    currentPage: 'Home'
  }),
  actions: {
    setPage(page) {
      this.currentPage = page;
    }
  }
});

在组件中使用：

<template>
  <div>
    <button @click="setPage('Home')">Home</button>
    <button @click="setPage('About')">About</button>
    <div v-if="currentPage === 'Home'">Home Page</div>
    <div v-else>About Page</div>
  </div>
</template>

<script>
import { usePageStore } from '../stores/pageStore';
import { mapState, mapActions } from 'pinia';

export default {
  computed: {
    ...mapState(usePageStore, ['currentPage'])
  },
  methods: {
    ...mapActions(usePageStore, ['setPage'])
  }
};
</script>

以上方法可以根据项目需求选择适合的方式实现点击页面切换。

vue实现点击页面切换