vue-router刷新的问题

Question

用的是vue-router做的下面的四个栏，这是商品详细信息界面，路由为/productdescription，下面的四个栏商品信息，购买记录，客户评价，买家问答为四个不同的组件，而且在/productdescription下各自有一个子路由。如果我选择了一栏，如图1，当我在当前路由刷新页面的时候，情况完全变了，变成了图2，这是什么问题？帮忙看一下，谢谢
图1

图2

粘贴了下面四个栏的父组件的代码，跟四个栏组件代码应该没有太大关系。
父级用的一个click事件进行切换四个栏

模板

<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

    /* 下面关于商品的一栏 */
    .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;
    }


    /* 鼠标点击按钮样式 */
    .four_columns .four_columns_title_wrap .cur{
        background-image: url(./../../assets/four_columns_on.png);
        background-repeat: no-repeat;
        background-position: 0 0;
    }

Answer 1

大概懂你的意思了，你的需求应该是页面刷新后，会显示刷新前的选择状态，对吧？比如说，刷新前点击的是顾客评论，刷新后还需要是估计评论这个选项卡。
你可以这样，利用一个可以缓存的值来记录当前选中的是什么选项卡，然后页面加载的时候就先检查有没有这个值，有的话就直接赋值给 你 控制 active选项卡的值。
可以缓存的大概有两个，一个是本地缓存localStorage，还有就是利用URL了。推荐是用localstorage。

Answer 2

项目中用到vuex了吗？建议将activeTab数据保存在vuex中，点击tab的时候给activeTab重新赋值，这样刷新页面的时候就不会回到默认的第一个选项卡上了。