当前位置：首页 > VUE

vue实现点击页面切换

2026-01-12 01:52:53VUE

Vue 实现页面切换

在 Vue 中实现页面切换通常可以通过以下几种方式实现，具体选择取决于项目需求和技术栈。

使用 Vue Router 实现页面切换

Vue Router 是 Vue 官方提供的路由管理工具，适合单页面应用（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: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

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

export default router

在组件中使用路由链接切换页面：

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

使用动态组件实现页面切换

如果不需要 URL 变化，可以使用 Vue 的动态组件实现页面切换。

定义组件：

// components/Page1.vue
<template>
  <div>Page 1 Content</div>
</template>

// components/Page2.vue
<template>
  <div>Page 2 Content</div>
</template>

使用动态组件：

<template>
  <div>
    <button @click="currentComponent = 'Page1'">Page 1</button>
    <button @click="currentComponent = 'Page2'">Page 2</button>
    <component :is="currentComponent"></component>
  </div>
</template>

<script>
import Page1 from './components/Page1.vue'
import Page2 from './components/Page2.vue'

export default {
  components: {
    Page1,
    Page2
  },
  data() {
    return {
      currentComponent: 'Page1'
    }
  }
}
</script>

使用条件渲染实现简单切换

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

<template>
  <div>
    <button @click="showPage1 = true">Page 1</button>
    <button @click="showPage1 = false">Page 2</button>

    <div v-if="showPage1">
      Page 1 Content
    </div>
    <div v-else>
      Page 2 Content
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showPage1: true
    }
  }
}
</script>

添加页面切换动画

可以为页面切换添加过渡效果，提升用户体验。

使用 Vue 过渡组件：

<template>
  <router-view v-slot="{ Component }">
    <transition name="fade" mode="out-in">
      <component :is="Component" />
    </transition>
  </router-view>
</template>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>