v-for写在非template上，添加:key没有任何问题，但是写在template上就不行了，加了就报错。有些时候由于内容过多，不得不写在上面，以下是解决方法：

<template v-for="item,index in 5">
 ---其他标签
       测试{{index}}

   ---其他标签
</template>

<template>
    <div class="root">

        <div v-for="item,index in 5" :key="index">
         ---其他标签
        测试{{index}}
         ---其他标签
        </div>

    </div>
</template>

根据解析出来的内容，我们直接这么写，就OK了。套上了两层div

或者：
写在下一层需要循环遍历的真实dom上加一个key即可。

 <template v-for="item in pageFooterConfig">
  <van-tabbar-item :to="item.to" :key="item.to">
       <span>{{item.name}}</span>
       <template #icon="props">
           <template v-if="!item.icon.startsWith('icon-')">
               <van-icon :name="item.icon" />
           </template>
           <template v-else>
               <npicon :active="props.active" :icon="item.icon" activefill="#ff5f16" @clickIcon="clickIcon"/>
           </template>
           
       </template>
   </van-tabbar-item>
</template>

一、v-for中为什么要用key

• vue中列表循环需加:key=“唯一标识”
  唯一标识尽量是item里面id等，因为vue组件高度复用增加Key可以标识组件的唯一性，为了更好地区别各个组件
  key的作用主要是为了高效的更新虚拟DOM。
• key主要用来做dom
  diff算法用的，diff算法是同级比较，比较当前标签上的key还有它当前的标签名，如果key和标签名都一样时只是做了一个移动的操作，不会重新创建元素和删除元素。
• 没有key的时候默认使用的是“就地复用”策略。如果数据项的顺序被改变，Vue不是移动Dom元素来匹配数据项的改变，而是简单复用原来位置的每个元素。如果删除第一个元素，在进行比较时发现标签一样值不一样时，就会复用之前的位置，将新值直接放到该位置，以此类推，最后多出一个就会把最后一个删除掉。
• 尽量不要使用索引值index作key值，一定要用唯一标识的值，如id等。因为若用数组索引index为key，当向数组中指定位置插入一个新元素后，因为这时候会重新更新index索引，对应着后面的虚拟DOM的key值全部更新了，这个时候还是会做不必要的更新，就像没有加key一样，因此index虽然能够解决key不冲突的问题，但是并不能解决复用的情况。如果是静态数据，用索引号index做key值是没有问题的。
• 标签名一样，key一样这时候就会就地复用，如果标签名不一样，key一样不会复用。