as shown in figure 1, click on the second picture to pass all the src,price of name,img in the route, which looks like figure 2, but when you click on the four columns below, there is nothing left. It must be the routing problem, but how should I modify it?

1

2

figure 3

parent route template

<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>

Child routing template

<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>

templates for the following four columns

<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 of the following four columns

data(){
            return{
                othercolumns: [
                    { 
                        columnsname: "",
                        routerlink: "/productdescription/otherproductinformationgoodsdescribe"
                    },
                    { 
                        columnsname: "",
                        routerlink: "/productdescription/otherproductinformationpurchaserecord"
                    },
                    { 
                        columnsname: "",
                        routerlink: "/productdescription/otherproductinformationcustomerreviews"
                    },
                    { 
                        columnsname: "",
                        routerlink: "/productdescription/otherproductinformationbuyeranswer"
                    }
                ]
            }
        },