vue子路由

前言：
上次简单介绍了vue-router，并且创建了两个路由，如果还没学过路由基础知识请点这里

子路由：
比如有一个地址，圈出的地方在banana目录下，可以是b1，也可以是b2，那么b1,b2就叫做banana的子路由

子路由.png
创建子路由的步骤：

1. 首先做两个导航，分别是banana下边的1号和2号。在App.vue里做

   
   导航.png

2. 在components目录下创建两个文件，分别是b1.vue和b2.vue，两个文件的内容相似即可

   
   b1.png

3. 在老父亲banana.vue中添加一行。router-view是为了给子模板提供插入位置。b1，b2是banana的子页面，就像继承一样

   
   banana.png
4. 在Router文件夹的index.js中添加路由规则
   引入b1b2.png
   子路由规则.png
   效果
   子路由.gif