嵌套路由机制（url改变了，但是页面没有加载子组件）

如果url为localhost:8080/#/A 的话，页面会对应渲染A组件的内容

如果url为 localhost:8080/#/A/B 的话，页面还是会对应渲染A组件的内容

原因是什么呢，解决方案有两种？

1.router.js的配置

{

      path: '/A',

      name: 'A',

      component: A,

       children: [{

         path: 'B',

         name: 'B',

         component: B

       }

       ]

    }

用children来描述子路由的话，是需要在父级页面A中写router-view标签用来承载B页面，如果不写的话，router-view的匹配机制只会往下寻找一个路由页面，不再寻找第二个，这是后就只会加载A页面，不会加载B页面，所有我们需要在A.vue中写<router-view></router-view>,与此标签平级的div即为A页面的内容，用if else判断是否显示

2.router.js的配置

{

      path: '/A/B',

      name: 'B',

      component: B

    },

    {

      path: '/A',

      name: 'A',

      component: A

    }

这样把子页面的路由写在父页面前面的话，路由匹配就从上往下找，会先找到子页面，这样子页面就可以成功显示啦，如果子页面不写在父页面的上面 localhost:8080/#/A/B这个url是会先匹配到A组件的，所以会一直显示A页面，无法调转到B页面。这样也可以减少vue文件中多余的router-view标签的添加。

两种方法均可，个人比较推荐第二种啦