今天在整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)

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

不過現在沒空知道是什麼原因，先把專案做完再說...

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