在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ vue-router的相關問題

vue-router的相關問題

圖1所示,點擊第二個圖片,在路由中把name,img的src,price都傳了過去,成為了圖2的樣子,但是點擊下面的四個欄的時候,傳過來的東西就沒有了。肯定是路由的問題,但是應該怎么修改?

圖1圖1

圖2圖2

圖3圖3

父路由模板

<router-link
                :to="{name: 'otherproductinformationgoodsdescribe', query: {productid: list.goodsname,productimg: list.goodspic,productmarketprice: list.marketprice,productpresentprice: list.presentprice}}"
                @click="selectproduct()">
                <div 
                    class="products_goods_pic">
                      <img 
                          class="goods_pic" 
                          :src="list.goodspic">
                </div>
            </router-link>

子路由模板

<template>
    <div class="goods_description_wrap">
        <div 
            class="goods_description_pic"
            @mouseenter="showcheckeddetailelement=true"
            @mouseleave="showcheckeddetailelement=false">
            <img 
                class="productimg" 
                :src="this.$route.query.productimg">
            <span
                v-show="showcheckeddetailelement"
                @mouseenter="showcheckeddetailelement=true"
                class="goods_description_detailed_see"
                :style="{ left: followcheckedx+'px', top: followcheckedy+'px'}"></span>
            <div 
                class="detial_see_wrap"
                @mousemove="checkeddetailproduct($event)">
            </div>
        </div>
        <!-- 查看大清晰圖片 -->
        <div
            v-show="showcheckeddetailelement" 
            class="goods_description_detailed_div">
            <img 
                class="detail_sobig_img"
                :src="this.$route.query.productimg"
                :style="{ left: -followcheckedx*2 +'px', top: -followcheckedy*2 +'px'}">
        </div>
        <div class="goods_description_others">
            <div class="goods_description_others_name">
                <span class="goods_description_name">{{ this.$route.query.productid }}</span>
            </div>
            <!-- <div class="goods_description_others_line"></div> -->
            <div class="goods_description_others_price_wrap">
                <div class="now_price_wrap">
                    <span class="now_price_text">市場價:</span>
                    <span class="now_price">¥{{ this.$route.query.productmarketprice }}</span>
                </div>
                <div class="reduce_price_wrap">
                    <span class="reduce_price_text">價格:</span>
                    <span class="reduce_price">¥{{ this.$route.query.productpresentprice }}</span>
                </div>
                <div>
                    
                </div>
            </div>
            <div class="goods_description_others_counts_wrap">
                <div class="counts_text">
                    <span>數(shù)量:</span>
                </div>
                <div class="counts_btns">
                    <a 
                        class="counts_btns_left"
                        @click="countsReduce()"></a>
                    <input 
                        class="goodscounts" 
                        type="text" 
                        :value="productcounts.purchasecounts" 
                        disabled="disabled">
                    <a 
                        class="counts_btns_right"
                        @click="countsAdd()"></a>
                    <div class="div_clear"></div>
                </div>
                <span class="counts_kucun">(庫存{{ productcounts.remaincounts }})</span>
                <div class="div_clear"></div>
            </div>
            <div class="goods_description_others_btns_wrap">
                <div class="now_buy">
                    <span class="now_buy_text">立即購買</span>
                </div>
                <div class="join_shopping">
                    <span class="join_shopping_text">加入購物車</span>
                </div>
                <div class="div_clear"></div>
            </div>
        </div>
        <div class="div_clear"></div>
    </div>
</template>

下面四個欄的模板

<template>
    <div class="four_columns">
        <ul class="four_columns_title_wrap">
            <router-link
                    tag="li"
                    v-for="(list,index) in othercolumns"
                    :key="list.id"
                    :to="list.routerlink"
                    class="four_columns_title">
                <span class="title_text">{{ list.columnsname }}</span>
            </router-link>
        </ul>
        <transition name="fade" mode="out-in">
            <router-view></router-view>
        </transition>
        <div class="four_columns_footer">
            <div class="four_columns_footer_previous">
                <span>上一個:無</span>
            </div>
            <div class="four_columns_footer_next">
                <span>下一個:好麗友  Q蒂多層蛋糕...</span>
            </div>
        </div>
    </div>
</template>

下面四個欄的js

data(){
            return{
                othercolumns: [
                    { 
                        columnsname: '商品信息',
                        routerlink: '/productdescription/otherproductinformationgoodsdescribe'
                    },
                    { 
                        columnsname: '購買記錄',
                        routerlink: '/productdescription/otherproductinformationpurchaserecord'
                    },
                    { 
                        columnsname: '顧客評論',
                        routerlink: '/productdescription/otherproductinformationcustomerreviews'
                    },
                    { 
                        columnsname: '買家問答',
                        routerlink: '/productdescription/otherproductinformationbuyeranswer'
                    }
                ]
            }
        },
回答
編輯回答
爆扎

clipboard.png
這個圖片依賴路由傳遞的數(shù)據(jù),
下面的選項卡也用的理由,切換下面選項卡的時候,原來路由的數(shù)據(jù)被替換了,所以才會有這種情況
建議:
1、下面不用路由處理,用選項卡切換
2、或者切換下面路由的時候帶上上面圖片所依賴的的參數(shù)
希望對你有幫助

2017年12月9日 13:46