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

                Vue.use(VueRouter)

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

                // 重定向
                const routes = [
                  {
                    path: '/foo/:id',
                    component: Foo,
                    // 参数不能是动态路由
                    redirect: '/bar/1'
                  },
                  {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>
                      <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>