Vue 父路由和子路由

以黑马项目二leyou商城的前端界面为例

访问项目

我们在访问localhost:9001时候首先会进入index.html和读取main.js

main.js里面包含了new Vue（{}）,我们看一下里面参数：router。
router是路由，负责把数据渲染#app的元素上的< template>
寻着线索我们再来打开router.js文件

首先看到的是下图的routes
routes是一个路由数组，里面可以设置需要映射的路径。

父路由

访问localhost:9001/#/
系统会在route.js文件中匹配“/”根路径，此刻通过companent：路由到Layout组件。此刻网页页面会加载组件，并且显示出来。

子路由

通过父路由只是将导航栏、标题栏等内容加载进来了，细心的同学可以看到中间的主页面是空白的，为了好看可以在component下一行添加重定向到一个默认页面，redirect:"/index/dashboard"

用户点击边栏的各项子标题，可以触发对应子路由的路径，显示对应的界面信息。