router-link傳遞參數


有個功能:

依據傳入值,跳到產品詳情頁,但是詳情頁的內容依據傳入值來相應變化。

如果使用點擊事件@clic來實現,則有三個重復的跳轉代碼。

避免多次定義重復函數,可以使用router-link 傳參數來函數該功能。

帶參數跳轉:

<div style="width: 40%;height: 180px;border: 1px saddlebrown solid;margin: 30px auto;border-radius:5px;" v-for="pro in Products">
      <router-link :to="{name:'Detail',params:{'nameCN':pro.nameCN}}">
      <div style="float: left;width: 220px;height:116px;margin:20px 50px 20px 20px " >
        <p class="font_7" style="font-size: 17px">{{pro.nameCN}}</p>
        <p class="font_7" style="font-size: 15px">{{pro.nameEN}}</p>
        <br>
        <hr>
        <div style="margin-top: -15px">
            <span class="font_4" style="margin: 0 10px 20px 10px;">
              <span style="color: rgb(255, 204, 0);font-size: 40px;">+</span><span style="margin: 0 0 20px 10px;display: inline-block">詳細介紹</span>
            </span>
        </div>
      </div>
      <div v-if="pro.specs.length > 0" v-for="spec in pro.specs" style="margin-top: 15px;">
        <p class="font_8" style="font-size: 14px;">{{spec}}</p>
      </div>
      </router-link>
    </div>

 到達Detail頁獲取參數:

let name = this.$route.params.nameCN;

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM