[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同時使用