/** 
                    *   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 = [
                  // 给某个路由一个别名 name: 别名
                  {path: '/foo/:id', name: 'user', component: Foo},
                  {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属性传一个一个对象
                        :to = {name: 别名, params: {动态路由名: 值}}
                        或者用编程式导航 this.$route.push({name: 别名, params: {动态路由名: 值}})
                      -->
                      <router-link :to="{name: 'user', params: {id: 1}}">User</router-link>
                      <router-view></router-view>
                    </div>
                </template>



        
                /** 
                    *   Hello.vue
                */

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