当前位置：首页 > VUE

vue实现点击页面切换

2026-01-07 02:38:01VUE

实现点击页面切换功能

在Vue中实现点击页面切换功能，可以通过路由跳转或组件动态渲染两种方式完成。以下是具体实现方法：

使用Vue Router实现页面跳转

安装Vue Router后，在项目中配置路由：

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

Vue.use(Router)

export default new Router({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

在组件中添加点击事件触发路由跳转：

vue实现点击页面切换

<template>
  <div>
    <button @click="goToAbout">跳转到About页</button>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  methods: {
    goToAbout() {
      this.$router.push('/about')
    }
  }
}
</script>

使用动态组件切换

如果不使用路由，可以通过动态组件实现页面切换效果：

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

<script>
import Home from './components/Home.vue'
import About from './components/About.vue'

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

添加过渡动画效果

可以为页面切换添加平滑的过渡效果：

vue实现点击页面切换

<template>
  <transition name="fade" mode="out-in">
    <router-view></router-view>
  </transition>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

传递参数进行页面跳转

在跳转时可以携带参数：

// 通过query传参
this.$router.push({
  path: '/about',
  query: { id: 123 }
})

// 通过params传参
this.$router.push({
  name: 'About',
  params: { id: 123 }
})

在目标页面通过this.$route.params或this.$route.query获取参数。

以上方法可以根据项目需求选择使用，Vue Router适合多页面应用，而动态组件更适合简单场景的视图切换。