[vue3]router-link和v-for使用产生的问题

记录一个RouterLink，V-for，v-if同时使用的问题

可能的警告

Unhandled error during execution of render function

Unhandled error during execution of scheduler flush. This is likely a Vue internals bug.

点击跳转后显示的错误

Uncaught (in promise) TypeError: Cannot destructure property 'type' of 'vnode' as it is null.

起因

想要实现如下的结构转换，即每行外面再套一层容器来限制行内图片的数量

原代码

<div class = 'home'>
      <div class="pics">
        <template v-for="(item,index) of ImgUrls" :key = "index">
            <router-link class="oneTip" to="">
              <img :src="item[0]" alt="">
              <span>{{item[1]}}</span>
            </router-link>
        </template> 
      </div>
 </div>

修改后的理想代码

<div class = 'home'>
     <div class="pics">
       <template v-for="(item,index) of ImgUrls" :key = "index">
       	<div v-for="num of 3" v-if="index%3===0">
               <router-link class="oneTip" to="">
                 <img :src="ImgUrls[index-1+num][0]" alt="">
                 <span>{{ImgUrls[index-1+num][1]}}</span>
               </router-link>
           </div>
       </template> 
     </div>
</div>

报错/警告：

点击链接跳转后显示的错误：

报错原因（菜鸟的猜测）：

RouterLink存在双重循环的时候会存在重复渲染的问题？？？虚拟DOM不存在？？？
v-if和v-for同时使用产生的问题？？？？？
最好避免存在RouterLink的同时嵌套使用v-for/v-if和v-for同时使用