Vue中Duplicate keys detected错误

错误如下

拿到公司一个小哥哥的代码,一来就报了一堆bug,吓得我先写一篇博客

vue.runtime.esm.js?2b0e:619 [Vue warn]: Duplicate keys detected: '/system'. This may cause an update error.

found in

---> <Sidebar> at src/layout/components/Sidebar/index.vue
       <Layout> at src/layout/index.vue
         <App> at src/App.vue
           <Root>
  • 原因:v-for时,key值不唯一(一般出现在 v-for循环生成列表,对key值处理不当时)
  • 下列代码一可以修改route.path,但是项目急着要,所以就先加了一个前缀index处理
    原代码:
<sidebar-item v-for="(route, index) in permission_routes" :key="route.path" :item="route" :base-path="route.path" />  
  • 解决:
<sidebar-item v-for="(route, index) in permission_routes" :key="index + route.path" :item="route" :base-path="route.path" />
原文地址:https://www.cnblogs.com/serahuli/p/13264096.html