vue实现页面复用

Vue 实现页面复用的方法

在 Vue 中实现页面复用可以通过组件化、动态路由、混入（Mixin）等方式实现。以下是几种常见的方法：

组件化

将可复用的部分封装为组件，通过 props 传递数据，实现逻辑和 UI 的复用。例如：

<template>
  <div>
    <reusable-component :data="pageData" />
  </div>
</template>

<script>
import ReusableComponent from './ReusableComponent.vue';

export default {
  components: { ReusableComponent },
  data() {
    return {
      pageData: { title: '复用页面', content: '这是可复用的内容' }
    };
  }
};
</script>

动态路由

通过路由参数动态加载相同组件，实现页面复用。例如：

// router.js
const routes = [
  {
    path: '/page/:id',
    component: PageComponent,
    props: true // 将路由参数作为 props 传递
  }
];

在组件中通过 props 接收参数：

<template>
  <div>{{ pageId }}</div>
</template>

<script>
export default {
  props: ['id'],
  computed: {
    pageId() {
      return this.id;
    }
  }
};
</script>

混入（Mixin）

将公共逻辑提取为混入，多个页面共享相同的方法或数据。例如：

// mixins/reusableMixin.js
export default {
  data() {
    return {
      sharedData: '公共数据'
    };
  },
  methods: {
    sharedMethod() {
      console.log(this.sharedData);
    }
  }
};

在页面中引入混入：

<script>
import reusableMixin from './mixins/reusableMixin';

export default {
  mixins: [reusableMixin],
  mounted() {
    this.sharedMethod();
  }
};
</script>

插槽（Slot）

通过插槽实现 UI 的灵活复用。例如：

<!-- ReusableLayout.vue -->
<template>
  <div>
    <header><slot name="header" /></header>
    <main><slot /></main>
  </div>
</template>

使用时：

<template>
  <reusable-layout>
    <template #header>自定义标题</template>
    <div>自定义内容</div>
  </reusable-layout>
</template>

函数式组件

对于无状态组件，可以使用函数式组件提高复用性和性能。例如：

<template functional>
  <div>{{ props.data }}</div>
</template>

<script>
export default {
  props: ['data']
};
</script>

注意事项

• 组件化适合 UI 和逻辑的复用，动态路由适合基于参数的页面复用。
• 混入可能导致命名冲突，需谨慎使用。
• 插槽适合布局复用，函数式组件适合纯展示逻辑。