美文网首页
vue 抽组件,动态加载详情页数据

vue 抽组件,动态加载详情页数据

作者: jasmine_6aa1 | 来源:发表于2020-12-10 16:43 被阅读0次

项目中,都有重复的详情页,根据路由传参id进行判断展示那一条数据的详情页,由此而伸,做一个demo

demo结构

src
  view
      list // list文件夹
        id.vue
        index.vue
  config // 抽出来的配置文件
      detail.js
      product
         1.js
         2.js
         3.js
         4.js
1,路由操作

注:route.js中,新建两个路由(一个list,一个id详情页)

{
   path: '/list',
   name:'list',
   component: () => import('./../components/list/index.vue')
},
{
   path: '/list/:id',
   name:'listId',
   component: () => import( `./../components/list/id.vue`)
}
2,在src中,新建两个展示页面
  • index.vue
<template>
  <div class="detail">
    <!-- 这里是通过id来进行跳转页面的 -->
    <div v-for="(item, id) in productList" :key="id" @click="$router.push("/detail/" + item.id)" >
      <div>{{ item.name }}</div>
      <div>{{ item.des }}</div>
    </div>
    <!-- 因为页面是通过route路由来进行跳转的,所以这边要有一个路由容器展示 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      productList: [
        {
          id: 1,
          name: "教育行业",
          des: "明确企业资产管理的目标、策略和管理制度等。",
        },
        {
          id: 2,
          name: "制造行业",
          des: "明确企业资产管理的角色和分工,包括行政、采购等。",
        },
        {
          id: 3,
          name: "餐饮行业",
          des: "建立准确资产信息库包括与财务、合同等关联关系;优化管理流程;",
        },
        {
          id: 4,
          name: "物业管理",
          des: "选择合适的企业资产管理平台而非管理软件;",
        }
      ]
    }
  }
};
</script>
  • id.vue
<template>
  <div>
    <div>{{detailtId[this.currentId]}}</div>
  </div>
</template>
<script>
import config from "@/config/detail.js";
export default {
  data() {
    return {
      currentId: "",
      detailtId: config.productId
    };
  },
  mounted() {
    this.currentId = this.$route.params.id
  }
}
</script>
3,config中的一些配置展示
  • detail.js
import product1 from './product/1'
import product2 from './product/2'
import product3 from './product/3'
import product4 from './product/4'

export default {
  productId: {
    1:product1, 
    2:product2,
    3:product3,
    4:product4
  }
}
  • product文件夹下,统一类型js展示
    注:产品页中,只有数据是不一样的,其余布局都是一样的,所以在此是抽出来的
export default {
    name: '详情页2', // 此处是根据对应,展示页面的数据配置,返回的是一个对象
}

下面就给大家做一个展示


git.gif

这样,整个项目就减少了大量的冗余代码,能更简便的管控整个项目,也方便后期的维护。

相关文章