vue 加载静态资源之路由跳转传参
vue 加载静态资源
一：准备一个js文件把数据放进去，（这里面的静态图片要放在项目的public文件夹下面哦）
let array = [
{
code: "310151201",
street: "新村乡",
pinyin: "XinCun village",
detail:
"截止至2019年10月，新村乡有农户4516户，常住人口11756人，其中户籍人口10607人，外来常住从业人员1149人。其中60岁以上4197人，80岁以上584人，百岁老人1人，人口老龄化形势严峻。面对乡域内老年人人口比例很高，高龄、独居、纯老家庭较多，养老需求比较尖锐多元等问题，我乡统筹考虑，整合资源，加快为老服务体系建设，着力打造的老年宜居社区，促进新村社会养老事业持续健康发展。目前乡域内现有新村敬老院1家，在建敬老院1家，综合为老服务中心2家，长者照护之家1家，老年日间照料中心3家，综合型老年助餐点3家，标准化老年活动室8家，社区睦邻点86家，本着以人为本、公平、公正的原则，从老人实际需求出发，为老人提供生活照料、家政照护、医疗保健、精神慰藉、文化运动等多层次的居家养老服务。",
num1: 1.17,
num2: 0.42,
num3: "35.7%",
imges: [
{
name: "长者照护之家",
url: "static/street/310151201/1.png"
},
{ name: "综合为老服务中心", url: "static/street/310151101/2.png" },
{
name: "综合为老服务中心",
url: "static/street/310151201/3.png"
},
{
name: "活动开展",
url: "static/street/310151201/4.png"
}
]
},
.......等等
];
//导出
export default array;
二：在需要的页面引入,打印出streetArray可以看到我们的数据，我们将它循环处理push到我们自己定义的数组codes中
import streetArray from "@/assets/js/street";
data() {
return {
codes: [],
},
mounted() {
streetArray.forEach((value, key, array) => {
this.codes.push(value);
});
},
三：因为需要点击对乡镇跳到对应的乡镇详情，这里根据code来判断对应的乡镇
之前用的调转方式是router-link直接跳转:
<!-- <router-link
:to="{name:'StreetDetails',query:{code:'310151101'}}"
:style="style01"
class="street-item item1"
><span>详情</span></router-link
>
差不多有18个乡镇，写的头大，我就改成循环显示：
<div
v-for="(item, index) in codes"
:key="index"
:style="style01"
@click="details(item.code)"
:class="`street-item item` + ++index"
>
<span>详情</span>
</div>
因为有每个乡镇对应的定位都不一样，所以这里要动态添加class，其实就是item1,item2,item3， @click="details(item.code)是点击跳转的方法，
methods: {
details(code) {
this.$router.push({
name: "StreetDetails",
params: {
code
}
});
},
四：详情页接收我传过来的code，判断，赋值
mounted() {
//console.log(streetArray);
var code = this.$route.params.code;
console.log(code)
streetArray.forEach((value, key, array) => {
if (value.code == code) {
this.street = value.street;
this.pinyin = value.pinyin;
this.detail = value.detail;
this.num1 = value.num1;
this.num2 = value.num2;
this.num3 = value.num3;
this.imgArray = value.imges;
}
});
},
