vue2项目所有页面固定格式相同，内容不同时，封装组件

vue2项目所有页面固定格式，内容不同时，封装组件

新建json文件，把每页标题文字写到数组对象里

[
 {
  "title": "主页",
  "content": "这是主页"
  },
 {
  "title": "管理",
  "content": "这是管理"
  },
 {
  "title": "中心",
  "content": "这是中心"
  }
 ]

在父组件引入json文件，然后通过子组件传递的titile标题循环进行判断

<template>
  <div v-if="dataInfo" class="ExplainPage" :style="style">
    <h1>{{ dataInfo.title }}</h1>
    <p :title="dataInfo.content">{{ dataInfo.content }}
    </p>
  </div>
</template>
<script>
import DataJSON from './data.json'
export default {
 props: {
    title: {
      type: String,
      default: '主页'
    }
  },
 data() {
    return {
      dataInfo: null,
      style: {}
    }
  },
  //每页图片不同
   mounted() {
    if (!this.title) return
    DataJSON.forEach((e, i) => {
     if (e.title === this.title) {
        this.dataInfo = e
          this.style = {
         backgroundImage: 'url(' + require(`@/assets/image/top${i + 1}.png`) + ')',
          backgroundRepeat: 'no-repeat',
          backgroundPosition: 'left top',
          backgroundSize: '100% 100%'
        }
      }
    })
  }
  }
</script>
<style lang="scss" scoped>
//里面统一样式
</style>

每个子组件页面只需要props传参title值就可以

 <Page title="主页" />
 import ExplainPage from '@/components/Page'
  components: {Page },