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)

好家伙，这时候就会报错了。

不过现在没空知道是什么原因，先把项目做完再说...

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