zoukankan      html  css  js  c++  java
  • router-link传递参数

    有个功能:

    依据传入值,跳到产品详情页,但是详情页的内容依据传入值来相应变化。

    如果使用点击事件@clic来实现,则有三个重复的跳转代码。

    避免多次定义重复函数,可以使用router-link 传参数来函数该功能。

    带参数跳转:

    <div style=" 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; 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;
    好记性不如烂笔头,每天记录一点点
  • 相关阅读:
    CSS让DIV按照背景图片的比例缩放,并让背景图片填充整个元素(转)
    判断浏览器
    $.each遍历json对象
    jq塞入不同状态html的写法 switch (defaults.type)
    vue资料
    第三方登录
    获取一个项目的所有接口
    接口工具调研
    go自动化测试平台
    压测工具 vegeta
  • 原文地址:https://www.cnblogs.com/wayneliu007/p/10360732.html
Copyright © 2011-2022 走看看