子路由

app.vue

<div id="app">
    <p>
      导航：
      <router-link to="/">首页</router-link>
      <router-link to="/banana/b1">香蕉1号</router-link>
      <router-link to="/banana/b2">香蕉2号</router-link>
    </p>
    <router-view/>
  </div>

路由配置

 routes: [
    {
      path: '/',
      name:Login,
      component: Login
    },
    {
      path:'/banana',
      component: Banana,
      children:[
        {
          path:'/',
          component:B
        },
        {
          path:'b1',
          component:B1
        },
        {
          path:'b2',
          component:B2
        }
      ]
    }

  ]

3.banana

<div class="banana">
      <h1>{{message}}</h1>
        <router-view> </router-view>
    </div>