用的是vue-router做的下面的四個欄，這是商品詳細(xì)信息界面，路由為/productdescription，下面的四個欄商品信息，購買記錄，客戶評價，買家問答為四個不同的組件，而且在/productdescription下各自有一個子路由。如果我選擇了一欄，如圖1，當(dāng)我在當(dāng)前路由刷新頁面的時候，情況完全變了，變成了圖2，這是什么問題？幫忙看一下，謝謝
圖1

圖2

粘貼了下面四個欄的父組件的代碼，跟四個欄組件代碼應(yīng)該沒有太大關(guān)系。
父級用的一個click事件進(jìn)行切換四個欄

模板

<template>
    <div class="four_columns">
        <ul class="four_columns_title_wrap">
            <router-link
                    v-for="(list,index) in othercolumns"
                    :key="list.id"
                    :to="list.routerlink">
                <li 
                    class="four_columns_title"
                    @click="clickcolumn=index"
                    :class="clickcolumn===index ? 'cur' : ''">
                    <span class="title_text">{{ list.columnsname }}</span>
                </li>
            </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

export default{
        data(){
            return{
                clickcolumn: 0,
                othercolumns: [
                    { 
                        columnsname: '商品信息',
                        routerlink: '/productdescription/otherproductinformationgoodsdescribe'
                    },
                    { 
                        columnsname: '購買記錄',
                        routerlink: '/productdescription/otherproductinformationpurchaserecord'
                    },
                    { 
                        columnsname: '顧客評論',
                        routerlink: '/productdescription/otherproductinformationcustomerreviews'
                    },
                    { 
                        columnsname: '買家問答',
                        routerlink: '/productdescription/otherproductinformationbuyeranswer'
                    }
                ]
            }
        }
    }

css

    /* 下面關(guān)于商品的一欄 */
    .four_columns{
        width: 1200px;
        margin: 50px auto 0;
    }
    .four_columns_title_wrap{
        width: 1200px;
        height: 39px;
        border-bottom: 1px solid #aaa099;
    }
    .four_columns_title_wrap li.four_columns_title{
        float: left;
        margin: 0 1px -1px 0;
        width: 132px;
        height: 39px;
        text-align: center;
        border: 1px solid #aaa099;
        border-bottom: none;
        background-image: url(./../../assets/four_columns_off.png);
        background-repeat: no-repeat;
        background-position: 0 0;
        cursor: pointer;
    }
    .four_columns_title_wrap .four_columns_title_first{
        margin-left: 10px;
    }
    .four_columns_title_wrap li.four_columns_title span.title_text{
        font-family: 'SimSun';
        width: 100%;
        height: 100%;
        font-size: 14px;
        line-height: 40px;
    }


    /* 鼠標(biāo)點(diǎn)擊按鈕樣式 */
    .four_columns .four_columns_title_wrap .cur{
        background-image: url(./../../assets/four_columns_on.png);
        background-repeat: no-repeat;
        background-position: 0 0;
    }