vue-router的相关问题

Question

图1所示，点击第二个图片，在路由中把name，img的src，price都传了过去，成为了图2的样子，但是点击下面的四个栏的时候，传过来的东西就没有了。肯定是路由的问题，但是应该怎么修改？

图1

图2

图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>数量:</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'
                    }
                ]
            }
        },

Answer 1

这个图片依赖路由传递的数据，
下面的选项卡也用的理由，切换下面选项卡的时候，原来路由的数据被替换了，所以才会有这种情况
建议：
1、下面不用路由处理，用选项卡切换
2、或者切换下面路由的时候带上上面图片所依赖的的参数
希望对你有帮助