路由嵌套层级太深导致页面刷选不成功

问题描述：

首先 路由的配置是这样的，从路由Monthly页面跳转到MonthlyDetail页面，进入MonthlyDetail 页面并没有刷新，没有反应，找了好久的问题所在，监听路由变化，onMounted生命周期中触发初始化，但是就是一直没有变动

  {path: '/monthly',name: 'Monthly',meta: { title: '月数据'},component: () => import('@/layouts/src/xx/xx/xx/monthly/index.vue'),},{path: '/monthlyDetail',name: 'MonthlyDetail',meta: { title: '详情'},component: () => import('@/layouts/src/xx/xx/xx/monthly/detail.vue'),},

问题原因：

是由于Vue Router的懒加载组件的缓存机制导致的。当使用import语法加载组件时，Vue Router默认会对组件进行缓存，以提高性能。这意味着一旦组件被加载过，再次访问相同的路由时，组件不会重新加载，而是直接使用缓存的组件实例。当从Monthly页面跳转到MonthlyDetail页面时，由于MonthlyDetail组件已经被加载过并缓存了，因此不会触发重新加载，导致没有看到页面刷新或反应。

解决方法 一： 层级嵌套不要太深，修改页面组件放置文件夹目录

  {path: '/monthly',name: 'Monthly',meta: { title: '月数据'},component: () => import('@/layouts/src/xx/xx/xx/monthly/index.vue'),},{path: '/monthlyDetail',name: 'MonthlyDetail',meta: { title: '详情'},component: () => import('@/layouts/src/xx/xx/xx/monthlyDetail/detail.vue'),},

解决方法二：路由配置中使用props: true来强制刷新组件

{path: '/monthlyDetail',name: 'MonthlyDetail',meta: { title: '详情'},component: () => import('@/layouts/src/xx/xx/xx/monthly/detail.vue'),props: true
}