VUE嵌套路由 component属性key的作用

背景

首先我们的项目是需要Vue多层嵌套路由的，即router-view中使用的页面还会有router-view。另外我们需要用到keep-alive进行页面级别的缓存，并且两层router-view都有用到，每个router-view的代码样式都如下

遇到的问题

当keepalive为true时候, 在一部分叶子页面加载时，发现生命周期钩子执行了两次，

image.png

问题原因

经过排查后发现，其实根源在于最外层的那个router-view中使用了route的name和meta进行了判断，但这个route并不符合预期。route始终指向的是最外层的叶子节点路由，而我们在外层判断期望的则是一级目录的route，自然就会出问题

解决方案

参考:https://segmentfault.com/a/1190000041459646?utm_source=sf-similar-article

key的作用

image.png

1.当我们不加key时 父组件/user 将会被复用
2.让router-view的key的唯一性会导致 动态渲染路由无法复用组件