用嵌套路由（view-router）实现多页面切换路由显示

一、需求：后台管理系统一般的页面架构就是：

      1、左侧一列菜单，根据路由配置显示标题和层级,有些页面的标题不需要显示在菜单中，则在路由配置中添加hidden路由标识，做相应的隐藏。

      2、右边是点击菜单显示相应的内容（主要内容），右边右上角还有一行面包屑来显示当前页面的层级。      

      根据题目的需求是，如：在一个产品列表页中点击某条信息，则跳转路由查看该条信息的详情，而产品列表则隐藏，这种情况就要用嵌套路由（view-router）来解决。（可能还有1-4级的嵌套）

二、会引起一些bug的解决方法：用slot插槽。

      1、代码：用transition包裹view-router和slot：

2、解析：

            a、transition可使页面切换更好看不可或缺

            b、view-router让页面可使用路由正常切换到二级页面，如产品列表页。注意，此时，路由只有一个，并没有嵌套路由

            c、为了可以实现像嵌套路由的效果，用slot插槽来代替了嵌套路由

      3、会引起的问题：

            a、报错，因为transition只能包含一个元素，如果改成transition-group，一样会有问题，因为transition-group的元素要独立的key，而slot没有key

            b、路由跳到三级页面时在点击返回按钮，某种情况下会让浏览器崩掉，CPU占用迅速增大，能达到30%

            c、其他

三、正确解决方法：使用嵌套路由

      1、代码：

            一级页面：

           二级页面（产品列表页）：

           三级页面（产品详情页）：

...
// 注：$route.matched 是一个数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。

      2、路由配置（更多相关配置内容可自行查阅）,简例：

const router = [
                  {
                        path: '/',
                        component: () => import('@/index'),
                        name: 'index',
                        hidden: false,
                        children: {
                              path: '/product',
                              component: () => import('@/product'),
                              name: 'product',
                              hidden: false,
                              children: {
                                    path: '/productDetail',
                                    component: () => import('@/productDetail'),
                                    name: 'productDetail',
                                    hidden: true,
                                    ...
                              }
                        }
                  }
            ]