情境是这是线上商城的详情页面,商品详情是items数组,点击分类页面的商品,路由跳转到详情页面,路由参数是商品在items中的序号。
但是问题是只有第一次点击商品i的时候可以正常加载items[i]的数据到html中,退出后点击商品j,发现加载的还是商品i的信息,只有刷新后才会更新成商品j的信息。
部分代码:
<shopPanel
:key = "nums"
:goodname="item.text"
:tag="item.tag"
:sale="item.sale"
:price="item.price"
:ori="item.ori_price"
>
</shopPanel>
和computed定义的,注意这里定义的数据item,是不能够修改的,想修改只能用set来修改。我这里测试时发现明明item关联的两个属性this.focus和this.idx改变了,那为什么item没有改变呢?而且是刷新后就能改变。
computed: mapState({
items:'items', //商品详情信息
item(){
console.log(this.focus+" "+this.idx);
return this.items[this.focus].children[this.idx]
}
}),
最后的原因竟然是定义路由的时候选择了keepalive,页面不会销毁,改成false就行。
path: '/item/item01',
name:'itemdetail',
meta: {
title: '商品1',
keepAlive: false,
showTab: false
},
component: (resolve) => require(['../page/itemdetail/item01'], resolve),