vue执行三级路由为什么会运行二级路由得生命周期?

Question

VUE项目,element框架,二开项目

我配置了三级路由,分别是 审核1->详情2->主体3 , 三个不同的界面,对应三级

{
    path: 'cm',
    component: () => import('../views/CM/index.vue'),
    meta: { title: '审核', icon: 'el-icon-receiving' },
    children: [
      {
        path: 'detail',
        name: 'cm-detail',
        component: () => import('../views/CM/detail.vue'),
        meta: { title: '详情', },
        children: [
          {
            path: 'rating',
            name: 'cm-rating',
            component: () => import('../views/CM/rating.vue'),
            meta: { title: '主体', },
          }
        ]
      },
    ],
  },

步骤A 页面进入,跳到主路由一级路由审核界面,页面执行 list 接口得到数据

步骤B 由审核进入详情,我通过 query 传递一个 id 到详情界面,在详情界面,掉用 info 接口(接口在 created 执行),通过 id 查询某些数据,查询到之后,页面渲染

步骤C 渲染后,我又操作某个按钮进入到第三级也就是主体界面,通过 query 传递了另一个 newID (在 info 接口中获取),页面通过 newID 调用 detail 接口(接口在 created 执行),主体页面渲染

步骤D 主体页面渲染之后,一切正常,手动点击 F5 刷新界面,页面执行了 info 和 detail 两个接口, info 接口因为没有 id 而报错, detail 接口则正常执行,页面渲染,唯独多执行了一次 info 接口

我通过断点执行了解到在刷新三级路由时候,执行了二级路由的 created ,但是在二级路由手动刷新时候没有执行一级路由的 created
我注意到一级路由审核界面,在 template 下边的 div 中有个判断路由的条件

<template>
  <div v-if="$route.path === '/home/cm'">
    内容乱七八糟的东西,一级路由
   </div>
  <router-view v-else></router-view>
</template>

于是我在二级路由详情界面加了同样的判断

<template>
  <div class="con-section" v-if="$route.path === '/home/cm/detail'">
    乱七八糟的代码,二级路由
  </div>
  <router-view v-else></router-view>
</template>

百度来的说 router-view 可以避免多次调用,但是我加了之后并没有什么改变,还是调用了 info 接口

类似这种,但是我并没有解决
https://segmentfault.com/q/10...

我通过在详情的 created 中判断 id 是否存在而暂时解决这个问题,但是界面还是执行了二级路由的 created
求教各位大佬解答

Answer 1

这应该不算是bug吧，都是子页面并且渲染在同一个页面上了，f5肯定会走created的。- -
如果不f5刷新，keep-alive可以满足你的需求。

Answer 2

f5刷新页面，当前路由对应的组件的生命周期函数会重新执行，所以没有办法阻止。
你在3级路由下刷新会执行2级路由的created，
在2级路由下刷新没有执行1级路由的created，那就是你的1级路由对应的组件没有挂载，
检查下你的路由是不是嵌套错误