项目中,都有重复的详情页,根据路由传参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', // 此处是根据对应,展示页面的数据配置,返回的是一个对象
}
下面就给大家做一个展示
![](https://img.haomeiwen.com/i21451412/ee01f0eb65242893.gif)
这样,整个项目就减少了大量的冗余代码,能更简便的管控整个项目,也方便后期的维护。
网友评论