vue-router传值 路由刷新问题

Question

如图1为产品详细信息界面，里面的信息src、name、marketprice、nowprice都是由图2传值进去的，图1就是个组件而已，如下述代码

图1

图2

<template>
    <div class="goods_description_wrap">
        <div 
            class="goods_description_pic"
            @mouseenter="showcheckeddetailelement=true"
            @mouseleave="showcheckeddetailelement=false">
            <img 
                class="productimg" 
                :src="this.$root.bestsellgoods[productid].goodspic">
            <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.$root.bestsellgoods[productid].goodspic"
                :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.$root.bestsellgoods[productid].goodsname }}</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.$root.bestsellgoods[productid].marketprice }}</span>
                </div>
                <div class="reduce_price_wrap">
                    <span class="reduce_price_text">价格:</span>
                    <span class="reduce_price">￥{{ this.$root.bestsellgoods[productid].presentprice }}</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" @click="getPrice()">
                    <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>

但是当重新刷新图1界面的时候，会报错，怎么样防止重新刷新页面会报错呢？

Answer 1

router 路由跳转的时候可以试试用 query