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;
      }
    });
  },

五：emmmm，我也不知道该写啥了，哈哈哈哈