zoukankan      html  css  js  c++  java
  • Vue中如何将数据传递到下一个页面(超级简单哒)

    先展示效果:注意URL中值是有变化的

    一:在goodslist.vue文件夹绑定

    <router-link :to="'/goodsinfo/'+subitem.artID" class="">
         <div class="img-box">
               <img v-lazy="subitem.img_url">
          </div>
           <div class="info">
           <h3>{{subitem.artTitle}}</h3>
                 <p class="price">
                        <b>{{subitem.sell_price}}</b>元</p>
                   <p>
                        <strong>库存 {{subitem.stock_quantity}}</strong>
                                            <span>市场价:
                                                <s>{{subitem.market_price}}</s>
                                            </span>
                                        </p>
                                    </div>
     </router-link>

     三:在下一个页面 goodsinfo.vue写入

      getGoodsInfoData() {
                    const url = `site/goods/getgoodsinfo/${this.$route.params.goodsId}`
    
                    this.$axios.get(url).then(res => {
                        this.goods = res.data.message
                    }, err => {
                        console.log(err)
                    })
                },

     四:在main.js中 即可

    const router = new VueRouter({
        routes: [{
                path: '/',
                redirect: '/goodslist'
            },
            {
                path: '/goodslist',
                component: goodslist
            },
            {
                path: '/goodsinfo/:goodsId',
                component: goodsinfo
            },
            {
                path: '/shopcart',
                component: shopcart
            }
        ]
    })

  • 相关阅读:
    Title
    Title
    JS淘宝小广告
    JS淘宝浏览商品
    JS隐藏显示图片
    JS图片轮播
    C#连接数据库的方法
    让$(window).scroll()监听事件只执行一次
    axios发delete请求,后台收不到参数;
    .gitignore规则简介
  • 原文地址:https://www.cnblogs.com/DZzzz/p/8891349.html
Copyright © 2011-2022 走看看