children的使用场景：比如页面左侧显示菜单，右侧显示不同菜单下的内容，类似如下element网站，那么右侧部分的内容就是当前页面的children
存在如下场景，点击导航一跳转至页面1，导航二跳转页面2，且页面1中存在子页面
路由js如下：
const routes = [{ path: '/', name: 'Home', component: Home, children: [{ path: '/page1', name: 'page1', component: function () { return import( /* webpackChunkName: "about" */ '../views/Page1.vue') }, children: [{ path: '/page1Son', name: 'page1Son', component: function () { return import( /* webpackChunkName: "about" */ '../views/Page1Son.vue') } }], }, { path: '/page2', name: 'page2', component: function () { return import( /* webpackChunkName: "about" */ '../views/Page2.vue') } }] } ]首页代码如下：
<template> <div class="home"> <el-menu default-active="2" class="el-menu-vertical-demo"> <el-submenu index="1"> <template slot="title"> <i class="el-icon-location"></i> <span slot="title"><router-link to="/page1">导航一</router-link></span> </template> </el-submenu> <el-menu-item index="4"> <i class="el-icon-setting"></i> <span slot="title"><router-link to="/page2">导航二</router-link></span> </el-menu-item> </el-menu> <router-view></router-view> </div> </template>
点击导航栏一显示页面1下的内容
点击页面1中的显示按钮，显示页面1的子页面page1Son
点击导航栏二显示页面2
