vue实现子页面

Vue 实现子页面的方法

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

使用 Vue Router 嵌套路由

嵌套路由允许在父路由下定义子路由，适用于多层级页面结构。

1. 定义路由配置 在 router/index.js 中配置嵌套路由：

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

2. 父组件中添加 <router-view> 在父组件模板中预留子组件渲染位置：

   <template>
   <div>
    <h1>父页面</h1>
    <router-view></router-view>
   </div>
   </template>

3. 导航到子路由 使用 <router-link> 或编程式导航：

   <router-link to="/parent/child">进入子页面</router-link>

动态组件切换

通过 Vue 的 is 特性动态加载不同子组件：

1. 定义子组件

   const ChildA = { template: '<div>子组件A</div>' }
   const ChildB = { template: '<div>子组件B</div>' }

2. 父组件中动态切换

   
   <template>
   <div>
    <button @click="current = 'ChildA'">显示A</button>
    <button @click="current = 'ChildB'">显示B</button>
    <component :is="current"></component>
   </div>
   </template>

export default { data() { return { current: 'ChildA' } }, components: { ChildA, ChildB } } ```

插槽实现布局组件

使用插槽创建可复用的布局框架：

1. 定义布局组件

   <!-- Layout.vue -->
   <template>
   <div class="layout">
    <header>页眉</header>
    <main>
      <slot></slot>
    </main>
    <footer>页脚</footer>
   </div>
   </template>

2. 使用布局组件

   
   <template>
   <Layout>
    <div>子页面内容</div>
   </Layout>
   </template>

import Layout from './Layout.vue' export default { components: { Layout } } ```

状态管理通信

当子页面需要与父组件通信时：

1. Props 向下传递

   
   <!-- 父组件 -->
   <ChildComponent :message="parentMsg" />

export default { props: ['message'] } ```

1. 事件向上传递

   
   <!-- 子组件 -->
   <button @click="$emit('notify', data)">通知父组件</button>

<ChildComponent @notify="handleNotify" />

### 注意事项

- 嵌套路由适合整体页面结构划分，动态组件适合局部内容切换
- 复杂场景可结合 Vuex 或 Pinia 进行状态管理
- 路由守卫可用于子页面的权限控制
- 保持组件单一职责原则，避免过度嵌套

以上方法可根据具体需求组合使用，构建灵活的页面层级关系。