当前位置：首页 > VUE

vue实现子页面

2026-03-10 09:39:19VUE

Vue 实现子页面的方法

在 Vue 中实现子页面通常涉及路由配置和组件嵌套。以下是几种常见的方法：

使用 Vue Router 嵌套路由

Vue Router 支持嵌套路由，适合实现父子页面结构。以下是一个基本配置示例：

// router.js
import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/parent',
    component: ParentComponent,
    children: [
      {
        path: 'child',
        component: ChildComponent
      }
    ]
  }
]

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

export default router

在父组件模板中需要添加 <router-view> 作为子组件的占位符：

vue实现子页面

<!-- ParentComponent.vue -->
<template>
  <div>
    <h1>父页面</h1>
    <router-view></router-view>
  </div>
</template>

动态组件切换

对于不需要路由的子页面，可以使用动态组件：

<template>
  <component :is="currentComponent"></component>
</template>

<script>
import ChildComponent1 from './ChildComponent1.vue'
import ChildComponent2 from './ChildComponent2.vue'

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

插槽方式

如果子页面是父组件的一部分，可以使用插槽：

vue实现子页面

<!-- ParentComponent.vue -->
<template>
  <div>
    <slot name="childContent"></slot>
  </div>
</template>

<!-- 使用父组件 -->
<ParentComponent>
  <template v-slot:childContent>
    <ChildComponent />
  </template>
</ParentComponent>

状态管理集成

对于复杂场景，可以结合 Vuex 或 Pinia 管理子页面状态：

// store.js
import { defineStore } from 'pinia'

export const usePageStore = defineStore('pages', {
  state: () => ({
    activeChildPage: 'dashboard'
  }),
  actions: {
    setActivePage(page) {
      this.activeChildPage = page
    }
  }
})

在组件中使用：

<template>
  <DashboardPage v-if="activeChildPage === 'dashboard'"/>
  <SettingsPage v-else-if="activeChildPage === 'settings'"/>
</template>

<script>
import { usePageStore } from './store'

export default {
  setup() {
    const pageStore = usePageStore()
    return { activeChildPage: pageStore.activeChildPage }
  }
}
</script>