vue-router在嵌套router中router-view失效的一个惊天大坑

近日遇到一个奇怪的问题，现象是在<router-link>点击链接时，如果没有加上target="_blank"，在一个新页面打开时，在一个nest router中的<router-view>中不会显示，重新刷新页面就显示出来了。

代码如下：

Index.vue

 <q-item-label lines="2" class="col-auto gt-sm YL__list_line_height YL__list_font_size">
            <span v-if="item.emphsis != 'null'" class="text-weight-bold">{{ item.emphsis }}</span
            >{{ item.detailBrief }}
            <router-link
              :to="{
                path: 'item',
                name: 'detail',
                params: { id: item.id },
              }"
              >...阅读全文
            </router-link>
          </q-item-label>

DetailLayout.vue

<template>
  <q-layout view="hHh lpR fFf" class="bg-secondary">
    <q-page-container class="bg-primary">
      <router-view />
    </q-page-container>

    <q-drawer
      side="right"
      :width="300"
      :breakpoint="700"
      show-if-above
      content-class="bg-primary text-white"
    >
    </q-drawer>
  </q-layout>
</template>

<script>
export default {
  name: 'DetailLayout',
};
</script>

routers.js

import DetailPage from 'pages/DetailPage.vue';

const routes = [
  {
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      {
        path: '',
        component: () => import('layouts/IndexLayout.vue'),
        children: [
          {
            path: '',
            component: () => import('layouts/IndexTabLayout.vue'),
            children: [
              { path: '', component: () => import('pages/Index.vue') },
              { path: 'rank', component: () => import('pages/Index.vue') },
              { path: 'cheap', component: () => import('pages/Index.vue') },
              {
                path: 'search',
                name: 'search',
                component: () => import('pages/Index.vue'),
                props: (route) => ({ query: route.query.q }),
              },
            ],
          },
        ],
      },

      {
        path: '/item/:id',
        name: 'detail',
        component: () => import('layouts/DetailLayout.vue'),
        // props: true,
        beforeEnter: (to, from, next) => {
          console.info('##before enter DetailLayout, to=' + to.fullPath);
          next();
        },
        children: [
          {     
            path: '',
            component: () => import('pages/DetailPage.vue'),
            props: true,
            beforeEnter: (to, from, next) => {
              console.info('%%before enter DetailPage, to=' + to.fullPath);
              next();
            },
          },
        ],
        // 在router之间传递参数用下面配置
        // props: (route) => ({ title: route.query.title, detail: route.query.detail }),
      },
    ],
  },

  {
    path: '*',
    component: () => import('pages/Error404.vue'),
  },
];

export default routes;