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;

 用chrome的开发工具调试，发现在点击“阅读全文”时，get请求是没有发出的，但是router-link在页面上已经是<a href="/item/179969" class="" >...阅读全文</a>了,（后来测试发现请求没发出是正常的，点击到本站点的链接就是看不到请求，重新刷新就有）。自己解决不了，网上搜，但大部分搜到的都是因为子路由的path配置以"/"开头，或是页面没有加<router-view />，这些都不是这个问题。

重新看了下文档，也没发现有什么问题：其中文档上有一句话

At this point, with the above configuration, when you visit /user/foo, nothing will be rendered inside User's outlet, because no sub route is matched. Maybe you do want to render something there. In such case you can provide an empty subroute path:

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id', component: User,
      children: [
        // UserHome will be rendered inside User's <router-view>
        // when /user/:id is matched
        { path: '', component: UserHome },

        // ...other sub routes
      ]
    }
  ]
})

那根据文档,我的路径是/item/179969，因为我的子路由路径配的是path: ''，所以根据文档，DetailPage.vue应该展现，但万万没想到，就是这句话出了问题。

我试图把routers.js配置成如下：

     {
        path: 'item',
        component: () => import('layouts/DetailLayout.vue'),
        // props: true,
        beforeEnter: (to, from, next) => {
          console.info('##before enter DetailLayout, to=' + to.fullPath);
          next();
        },
        children: [
          {
            name: 'detail',
            path: 'detail/:id',
            // component: () => import('pages/DetailPage.vue'),
            component: DetailPage,
            props: true,
            beforeEnter: (to, from, next) => {
              console.info('%%before enter DetailPage, to=' + to.fullPath);
              next();
            },
          },
        ],

此时子路由不是‘’，而是'detail/:id'，上级路由从/item/:id变成了path: 'item'，此时点击链接在同一个页面打开就把DetailPage给展现出来了。

这是说文档有问题？还是文档是指在打开新页面的情况下？因为那种配法在打开新页面或手动刷新都能把DetailPage给展现出来，就是在同一个页面打开时不行，感觉还是没匹配对路由。具体原理是什么还是一个vue的bug，不得而知。