标签：RouterLink error vue3 报错 during 跳转 link router execution

记录一个RouterLink和V-for同时使用的问题

可能的警告

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不存在？？？

最好避免存在RouterLink的同时嵌套使用v-for

标签：RouterLink,error,vue3,报错,during,跳转,link,router,execution
来源： https://www.cnblogs.com/qianduanxiaozhi1/p/15859310.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。