vue 组件复用不刷新

时间:2022-08-04 15:59:56

情景:

  两个路由"/a", "/b"公用一个页面组件, 在"/a"路由中, 第一列是序号, 在"/b"路由中, 第一列是多选框.

问题:

 以下代码在切换时, 从"/a"跳转到 "/b", 依旧显示是序号.

      <!-- 多选框 -->
<el-table-column
v-if="pageType == 'a'"
type="selection"
width="55">
</el-table-column> <!-- 序号 -->
<el-table-column
v-else
type="index"
label="序号"
width="50">
</el-table-column>

解决方法: 给两个组件各加一个不同的key

      <el-table-column
v-if="pageType == 'a'"
key="a-selection"

type="selection"
width="55">
</el-table-column>
<el-table-column
v-else
key="b-index"

type="index"
label="序号"
width="50">
</el-table-column>