/** 
                    *   main.js
                */
                
                import Vue from 'vue'
                import App from './App'
                import VueRouter from 'vue-router'
                import hello from './components/Hello.vue'
                import c1 from './components/c1.vue'
                import c2 from './components/c2.vue'

                Vue.use(VueRouter)

                // 定义路由组件
                const Foo = hello
                const Bar = { template: '<div>bar</div>' }

                // 命名视图
                const routes = [
                  {
                    path: '/foo/:id',
                    /*
                      components: {
                        default: 默认视图组件
                        视图名1: 组件1
                        视图名n: 组件n
                      }
                    */
                    components: {
                      default: Foo,
                      a: c1,
                      b: c2
                    }
                  },
                  {path: '/bar/:name', component: Bar}
                ]

                /* eslint-disable no-new */
                // 创建router实例 传入routers参数
                const router = new VueRouter({
                  routes
                })

                new Vue({
                  el: '#app',
                  template: '<App/>',
                  router,
                  components: { App }
                })




        
                /** 
                    *   App.vue
                */

                <template>
                    <div id="app">
                      <router-link to="/foo/1">User</router-link>
                      <!-- 
                        命名视图
                        name = "视图名"
                      -->
                      <router-view></router-view>
                      <router-view name="a"></router-view>
                      <router-view name="b"></router-view>
                    </div>
                </template>




                /** 
                    *   Hello.vue
                */

                <template>
                  <div class="hello">
                    <!-- $route.params.id : 获取路径参数 -->
                    路径参数 {{$route.params.id}}
                  </div>
                </template>