uses the following four columns made by vue-router, which is the product details interface, routing to / productdescription, under the four columns of product information, purchase records, customer reviews, buyer questions and answers for four different components, and each has a sub-route under / productdescription. If I select a column, as shown in figure 1, when I refresh the page on the current route, the situation completely changes to figure 2, what is the problem? Take a look at it. Thank you
1
figure 2
pasted the code of the parent component of the following four columns, which should not have much to do with the code of the four column components.
A click event used by the parent to switch four columns
template
<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 -sharpaaa099;
}
.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 -sharpaaa099;
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;
}