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，不得而知。