vue的简单路由

一个简单路由
类似文件夹展开
App.vue
|-index
|------------left`
|------------right
|-son
|-event
将所有组件路径都注册到index.js

App.vue

<div id="app">
    <router-view/>
  </div>

App.vue看作所有父路由，根目录，在App.vue的’router-view中，加载所有下级目录，index，son，event
默认加载index的“/”路径

index.js

{
          path: '/',
          name: 'index',
          component: index,
          children:[
              {
                  path: '/left',
                  name: 'left',
                  component: left
              },
              {
                  path: '/right',
                  name: 'right',
                  component: right
              }
          ]
      },
      {
          path: '/event',
          name: 'event',
          component: event
      },
      {
          path: '/son',
          name: 'son',
          component: son
      }

index.vue

{{msg}}
        <router-link to="/son">son</router-link>
        <router-link to="/left">left</router-link>
        <router-link to="/right">right</router-link>
        <router-link to="/event">event</router-link>

        <router-view/>

点击son和event，都会替换调index，在App.vue的router-view/中渲染son或者event，看作index的同级路径
在index中有router-view/，index 的子路由会在这里渲染，vue是有明确的路由级别的，如果在son中跳转left，会先退出son，进入同级的index，在index 的router-view/视图中展示left组件。