Vue嵌套路由——頁面跳轉成功，router-view卻不顯示/渲染，頁面不變

今天在整Vue項目的時候，整個嵌套路由，已方便組件的復用。
不過在之前寫后台的時候已經整過嵌套路由了，在網上發現好像很少有人在路由中使用兩個嵌套路由。

// 后台頁面的路由 index.js
{ 
  path: '/admin',
  component: Admin,
  children: [
    { path: '/user/add', component: addUser },
    //...
  ]
}

// 后台頁面的路由占位符 Admin.vue
<el-main>
  <router-view></router-view>
</el-main>

在后台頁面使用側邊菜單跳轉到路徑 /#/user/add ，頁面顯示成功，這是很正常的沒毛病。
然后我在整第二個嵌套路由的時候就出問題了

// 首頁頁面的路由 index.js
{
  path: '/',
  component: Home,
  redirect: '/home',
  children: [
    { path: '/home', component: clinicList }
  ]
}

// 首頁的路由占位符 Home.vue
<el-main>
    <router-view></router-view>
</el-main>

// clinicList.vue
<template>
    <el-row>...</el-row>
    <el-row>...</el-row>
<template>

結果鏈接是跳轉到了 /#/home ，Home.vue頁面的導航欄和底部也顯示了出來，但clinicList.vue中的內容倒是什么都沒顯示出來，也沒有報錯，瀏覽器中檢查頁面代碼，發現<el-main></el-main>標簽中是空的。

上網查問題,有

• routes和router寫錯的錯誤；
• component寫成components；
• 沒放路由占位符；
• 路由路徑少了/；
• 需要重啟
  回到IDEA各種嘗試，發現都不是這些錯誤。
  最后是碰巧解決了

// 原來的首頁
<!--header-->
<el-main>
    <router-view></router-view>
</el-main>
<!--footer-->

// 修改后的首頁
<!--header-->
<router-view></router-view>
<!--footer-->

// 原來的 clinicList.vue
<template>
    <el-row>...</el-row>
    <el-row>...</el-row>
<template>

// 修改后的 clinicList.vue
<template>
  <el-main>
    <el-row>...</el-row>
    <el-row>...</el-row>
  </el-main>
<template>

奇妙的事情發生了，路徑跳轉了，頁面也正常顯示了。

本來以為到這就完了，本着記錄一下問題並分享的想法，寫了這篇文章（其實是隨筆），然后寫的時候想直接復制代碼，所以在項目中把代碼改回了之前無法正常顯示的樣子。

這時候更奇妙的事情發生了

Failed to compile.

./src/views/clinicList.vue
Module Error (from ./node_modules/eslint-loader/index.js):

C:\Code\registration-booking-system\web\src\views\clinicList.vue
  22:3  error  The template root requires exactly one element  vue/valid-template-root

✖ 1 problem (1 error, 0 warnings)

好家伙，這時候就會報錯了。

不過現在沒空知道是什么原因，先把項目做完再說...

有大佬看到的話，希望大佬研究一下，交流交流。