当前位置：首页 > VUE

vue实现页面动态切换

2026-02-23 16:54:16VUE

Vue 实现页面动态切换的方法

使用 Vue Router 进行路由切换

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

// 安装 Vue Router
npm install vue-router

// 在 main.js 中配置路由
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

Vue.use(VueRouter)

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

const router = new VueRouter({
  routes
})

new Vue({
  router
}).$mount('#app')

<!-- 在 App.vue 中使用 router-link 和 router-view -->
<template>
  <div id="app">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

动态组件切换

使用 Vue 的 <component> 标签和 is 属性实现组件动态切换。

<template>
  <div>
    <button @click="currentComponent = 'ComponentA'">显示A</button>
    <button @click="currentComponent = 'ComponentB'">显示B</button>
    <component :is="currentComponent"></component>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

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

条件渲染切换

使用 v-if 和 v-else 指令实现条件渲染切换。

<template>
  <div>
    <button @click="showComponentA = !showComponentA">切换组件</button>
    <ComponentA v-if="showComponentA" />
    <ComponentB v-else />
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
  components: {
    ComponentA,
    ComponentB
  },
  data() {
    return {
      showComponentA: true
    }
  }
}
</script>

使用 keep-alive 缓存组件

在动态切换组件时，可以使用 <keep-alive> 缓存组件状态。

<template>
  <div>
    <button @click="currentComponent = 'ComponentA'">显示A</button>
    <button @click="currentComponent = 'ComponentB'">显示B</button>
    <keep-alive>
      <component :is="currentComponent"></component>
    </keep-alive>
  </div>
</template>

过渡动画效果

为页面切换添加过渡动画效果。

<template>
  <div>
    <button @click="show = !show">切换</button>
    <transition name="fade">
      <p v-if="show">Hello</p>
    </transition>
  </div>
</template>

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

路由守卫控制切换

使用路由守卫控制页面切换逻辑。

const router = new VueRouter({
  routes
})

router.beforeEach((to, from, next) => {
  // 验证权限等逻辑
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!auth.loggedIn()) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next()
  }
})

以上方法可以根据具体需求选择使用，Vue Router 适合构建完整的单页面应用，而动态组件和条件渲染适合简单的组件切换场景。

vue实现页面动态切换