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
        }
    ]
})

 

 

posted @ 2017-04-20 15:58  Fanyee  阅读(9258)  评论(0编辑  收藏  举报