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，我也不知道該寫啥了，哈哈哈哈