vue 组件复用不刷新

情景:

　　两个路由"/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>      

 

转载于:https://www.cnblogs.com/qiezuimh/p/10695092.html