开发过程中遇到奇奇怪怪的东西之二：路由嵌套层级太深导致页面刷选不成功

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

问题描述：

首先 路由的配置是这样的，从路由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
}