vue实现页面复用
Vue 实现页面复用的方法
在 Vue 项目中，页面复用可以通过组件化、动态路由、混入（Mixins）或高阶组件等方式实现。以下是几种常见的方法：
组件化设计
将重复的页面逻辑和 UI 封装为可复用的组件。通过 props 传递不同数据，实现动态渲染。
<template>
<div>
<h1>{{ title }}</h1>
<p>{{ content }}</p>
</div>
</template>
<script>
export default {
props: {
title: String,
content: String
}
}
</script>动态路由匹配
通过路由参数动态加载同一组件，实现页面复用。例如，不同 ID 的文章详情页可以使用同一个组件。
const routes = [
{
path: '/article/:id',
component: ArticleDetail
}
]在组件中通过 this.$route.params.id 获取参数并加载对应数据。
混入（Mixins）
将公共逻辑提取为混入对象，多个页面通过混入复用相同逻辑。
const commonMixin = {
methods: {
fetchData() {
// 公共数据获取逻辑
}
}
}
export default {
mixins: [commonMixin],
mounted() {
this.fetchData()
}
}高阶组件（HOC）
通过函数或组件包装方式，扩展基础组件的功能。例如，为多个页面添加相同的权限校验逻辑。
function withAuth(WrappedComponent) {
return {
render(h) {
if (checkAuth()) {
return h(WrappedComponent)
}
return h('div', '无权限访问')
}
}
}插槽（Slots）
利用插槽实现 UI 复用，父组件可自定义部分内容。
<template>
<BaseLayout>
<template #header>
<h1>自定义标题</h1>
</template>
</BaseLayout>
</template>注意事项
- 避免过度复用导致组件职责不清晰。
- 动态路由需处理好参数变化时的数据更新（如监听
$route变化）。 - 混入可能导致命名冲突，需合理规划方法和数据名称。
根据具体场景选择合适的复用方式，组件化是 Vue 复用的核心理念。
