/** 
                    *   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'

                Vue.use(VueRouter)

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

                // pushState模式
                const routes = [
                  {
                    path: '/foo/:id',
                    component: Foo
                  },
                  {path: '/bar/:name', component: Bar},
                  // 因为不是# 所以要覆盖所有可能样式 这里做一个都匹配不到的接收
                  {path: '*', component: c1}
                ]

                /* eslint-disable no-new */
                // 创建router实例 传入routers参数
                const router = new VueRouter({
                  // 启用 history 模式
                  mode: 'history',
                  routes
                })

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




                /** 
                    *   App.vue
                */

                <template>
                    <div id="app">
                      <router-link to="/foo/1">User</router-link>
                      <router-link to="/bar/name">Bar</router-link>
                      <router-view></router-view>
                    </div>
                </template>



        

                /** 
                    *   Hello.vue
                */

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