url、页面、页面组件、基础组件的关系
我们访问一个web应用是从一段url开始的。url对应着页面，但并不是固定的某一个页面，同一个url根据状态的不同可能会对应不同的页面。每个页面会对应一个页面组件，页面组件中的可复用部分被抽取成基础组件，一个页面组件可能对应着多个基础组件。
他们的关系如图：
单页应用导航图的可视化
页面组件内可以通过url来进行导航。vue-router配置的时候会指定url和对应的页面组件。页面我们用如下的方式来表示
单页应用中，最外层是App组件，包含全局一些全局组件和router-view组件，router-view会根据url的变化切换不同的子组件。
页面组件内部也可能有router-view，我们通过嵌套的方式来配置：
[{
name: 'aaa',
path: '/aaa'
component: Aaa,
children: [
{
name: 'bbb',
path: '/bbb',
component: Bbb
},
{
name: 'ccc',
path: '/ccc',
component: Ccc
}
]
}]
这样当我们从/aaa/bbb切换到/aaa/ccc时，Aaa组件内的router-view渲染的组件就会从Bbb切换成Ccc。
嵌套页面组件我们这样表示：
页面组件内可能使用了多个基础组件，如：
这样，我们就能把一个但也应用的所有导航关系可视化的表达出来。
比如我们的应用的页面导航图：
（其中快捷菜单quick和顶部导航topmenu两个基础组件是属于lecture页面组件的，因为lecture页面组件画的比较小所以放在了外面，另外，quick和topmenu的导航没有画全）
页面导航图的意义
画出应用的页面导航图之后，整个应用的业务流程就一目了然了。每个导航我都标出了对应的原因，顺着把整个每个导航理清楚的话，对应用中70%的业务逻辑也就有了比较好的理解，起码从全局上有了把控。
不管是vue、react或是angular的应用都可以这样去分析，当前在哪个页面，当做了什么操作会触发导航到哪一个页面。
总结
url、页面组件、基础组件是两两一对多的关系，通过对每个元素进行一些图形的表示，就可以把组件的种类的层次关系，页面组件之间的导航清晰的表示出来，通过画整个应用的导航图，能够对业务流程有整体的把控，从而更容易去理解业务逻辑和定位对应的代码。
